Javascript 单击时我的div不'；t使用js提交表单

所以我无法解决的问题是，我有一个php脚本，它从db中的聊天表中选择所有内容，并将其放入一个带有“chaty”类的div中。聊天室有一个“不可见”的表单，它有一个聊天索引值的输入。相当混乱。因此，基本上，当我单击div chaty的一部分时，由于jquery onclick（只有输入显示为none），内部的表单被提交。有一个聊天搜索，它使用ajax查询，它在提交时接收每个键更改的数据，然后按名称打印聊天记录。打印出来的聊天记录在单击时不会提交其中的表单。这里是聊天室前后和js代码。 代码： 提交的聊天记录：

<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>

<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>

---

谢谢你

试着从.开始生活。如果有效，则可能意味着您在元素出现在页面上之前初始化此事件处理程序。On将仅注册现有元素的事件。Live将确保为与选择器匹配的所有事件调用事件。甚至那些在将来注册的元素。这里有更多关于这个的信息

您必须使用-

---

您可以尝试在加载DOM时将事件封装在jquery ready函数中，然后将事件应用于特定元素

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

---

或者你也可以在上面提到的答案上使用

另一个选项是将事件附加到已存在的父元素。这件事会闹得沸沸扬扬的。我从来都不知道直播的api+1在jQuery 1.7中，不推荐使用.live（）方法。如果他使用的是最近的任何东西，那么使用.on（）将与使用.live（）具有相同的效果；我们在jQuery 3.2上。为什么？如果div是在js被实例化之后创建的，那么这是有意义的，但是OP说第一个HTML块可以工作，第二个HTML块是由PHP生成的（这将在浏览器看到任何标记之前生成标记）。这就是为什么使用事件委派（在动态生成的元素上应用事件）。请检查链接

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

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