单击时我的 div 没有使用 js 提交其中的表单答案

【问题标题】：My div when clicked doesn't submit the form inside of it with js单击时我的 div 没有使用 js 提交其中的表单
【发布时间】：2018-01-26 08:26:52
【问题描述】：

所以我无法解决的问题是我有一个 php 脚本，它从 db 中的聊天表中选择所有内容，并将其变成具有“chaty”类的 div。 chaty 有一个“不可见”的表单，它有一个带有聊天索引值的输入。相当混乱。因此，从根本上说，当我单击 div 的一部分时，由于 jquery onclick（只有输入不显示），内部的表单会被提交。有一个使用 ajax 查询的聊天搜索，它接收提交时每个关键更改的数据，然后按名称打印聊天。当您单击时，打印出来的聊天不会在其中提交表单。这是之前和之后的聊天 div 和 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>

JS：

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

谢谢

【问题讨论】：

标签： javascript php html css forms

【解决方案1】：

你必须使用event-delegation-

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

【讨论】：

为什么？如果 div 是在 js 实例化之后创建的，这将是有意义的，但是 OP 说第一个 HTML 块有效，第二组由 PHP 生成（它会在浏览器看到任何标记之前生成标记。跨度>
这就是使用事件委托的原因（在动态生成的元素上应用事件）。请检查链接

【解决方案2】：

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

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

或者你也可以使用上面提到的函数。

【讨论】：

【解决方案3】：

尝试从 .on 切换到生活。如果它有效，则可能意味着您在元素出现在页面上之前初始化此事件处理程序。 On 只会为现有元素注册事件。 Live 将确保为所有匹配选择器的事件调用该事件。甚至那些将来注册的元素。这里有更多关于这个。 http://api.jquery.com/live/

【讨论】：

另一种选择是将事件附加到已经存在的父元素。该事件将冒泡它。我从来不知道live api。 +1
从 jQuery 1.7 开始，不推荐使用 .live() 方法。如果他使用的是最近的任何东西，使用 .on() 将与使用 .live() 具有相同的效果；我们使用的是 jQuery 3.2。