My div when clicked doesn't submit the form in

Question

So the problem that I can not solve is that I have a php script that selects everything from the chat table in the db and makes it into a div with a class of 'chaty'. The chaty's have an "invisible" form which has a input with the value of the chat index. Quite confusing. So fundamentally when I click on part of the div chaty the form inside gets submitted because of a jquery onclick(only the input is displayed none). There is a chat search which uses an ajax query it receive data on each key change on the submit and then the chats are printed out by name. The chats printed out do not submit the form within them when you click. Here are the chaty divs before and after and js code. Code: Chat that gets submited:

<div class="chaty">
<form method="post" action="index.php" name="chat_lox" class="chat_loc">
<input id="disspell" type="text" name="chat_locy" v 
value="5e2dbe2be3b5927c588509edb1c46f7d">
</form>
<div class="chatDesc" id="14025298">
<div class="tit">Creator: </div>
<div class="iriss"><i id="close_chatn" onclick="closeChat(14025298)" 
class="material-icons">close</i></div>

<form action="mypage.php" method="post">


<div class="authr_name"><button value="John Brown" name="userlink" 
class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">jaames</div>
</div>


 <span onclick="openChat(14025298)">☰</span>
 <div class="chatname"><h3>james</h3></div>
 <div class="chatback" 
 style="background:url
 (cimages/1Hitsujib4cc344d25a2efe540adbf2678e2304c1501268980.jpg);  
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 50% 50%;"></div>
 <div class="underlie"><p>Users: 2</p><p> Created: 2017/07/28 07:09:40pm</p>
 </div>

 </div>

Chat that does not get submited:

<div class="chaty">
<form method="post" action="index.php" name="chat_lox" class="chat_loc">
<input id="disspell" type="text" name="chat_locy" value="5e2dbe2be3b5927c588509edb1c46f7d">
</form>
  <div class="chatDesc" id="55876362" style="display: none; width: 0px;">
<div class="tit">Creator: </div>
  <div class="iriss"><i id="close_chatn" onclick="closeChat(55876362)" class="material-icons">close</i></div>

  <form action="mypage.php" method="post">


  <div class="authr_name"><button value="John Brown" name="userlink" class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">jaames</div>
</div>


<span onclick="openChat(55876362)">☰</span>
<div class="chatname"><h3>james</h3></div>
<div class="chatback" style="background:url(cimages/1Hitsujib4cc344d25a2efe540adbf2678e2304c1501268980.jpg);  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;"></div>
<div class="underlie"><p>Users: 2</p><p> Created: 2017/07/28 07:09:40pm</p></div>

</div>

JS:

$(".chat_loc").on("click",function() {
  $(this).submit();
  alert("submitted");
 });

Thank you

Answer 1

You have to use event-delegation-

$(document).on("click",".chat_loc",function() {
  $(this).submit();
  alert("submitted");
});

Answer 2

You may try by encapsulate the event inside the jquery ready function when the DOM loaded then the event apply to the particular element.

  $(function(){
    $(".chat_loc").on("click",function() {
      $(this).submit();
      alert("submitted");
    });
  });

Or you can also use on function that mentioned above answer.

Answer 3

Try swiching from .on to live. If it works it may means you initialize this event handler before the element is on the page. On will only register events for existing elements. Live will ensure the event is called for any and all that match the selector. Even those elements that are registered in the future. Here is more on this. http://api.jquery.com/live/