单击动态子表单时如何停止父单击触发答案

【问题标题】：How to stop parent click firing when clicked on dynamic child form单击动态子表单时如何停止父单击触发
【发布时间】：2014-03-07 02:14:21
【问题描述】：

我有一个绑定到 onclick 事件的父网格。然后我有一个图像，它绑定到它自己的click 函数。我已经使用event.stopPropagation(); 来阻止父 div 在点击这个时触发。

然后在子点击事件中，将出现一个带有文本框、组合框等的表单。该表单包含在div 中。所以我也使用了事件传播，但它不起作用。无论我在哪里单击子窗体，都会触发父单击事件。

有解决办法吗？
html代码：

<div id="droppable" class="droppable">
</div>

脚本： //这是图片点击事件

$('.configClone'+count).on('click', function (event) {
      event.stopPropagation();

      $(this).addClass("selected"+attrId).parent().append('<div id="pop' + attrId + '" class="messagepop pop' + attrId + '"><form method="post" id="new_message" action="/messages"><p><label for="definedStream">Please select the stream</label><select><option value="volvo">Volvo</option><option value="saab">Saab</option></select></p></form><table border="0"><tr><td><font><b>Attributes</b></font></td><td></td><td><font><b>Assigned Attributes</b></font></td>'+
                        '</tr><tr><td><select id="cmdAllRoles" name="cmdAllRoles" size="6" style="height:100px; width:150px" class="fontDefault" MULTIPLE tabindex="20"></select></td><td valign="middle">'+
                        '<input type="button" id="btnAddRole" name="btnAddRole" value=">" onClick="selectDrag(3)" class="Button-nav" tabindex="15"><br><input type="button" id="btnAddAll" name="btnAddAll" value=">>" onClick="selectDrag(4)" class="Button-nav"><br><input type="button" id="btnRemoveAll" name="btnRemoveAll" value="<<" onClick="selectDrag(1)" class="Button-nav"><br><input type="button" id="btnRemove" name="btnRemove" value="<" onClick="selectDrag(2)" class="Button-nav"><br>'+
                        '</td><td><select id="cmdRoles" name="cmdRoles" size="6" style="height:100px; width:150px" class="fontDefault"></select></td></tr></table></div>');


    //trying to stop propagation from child div
     $(".pop" + attrId).click(function(event) {

          event.stopPropagation();
      alert(5);                   

     });
  }


 $("#droppable").click(function(event) {

    alert(6);
 }

alert(6) 在我点击动态表单的地方触发。

问题2：我将对其进行编辑，以便于解释。使用

 $(".pop" + attrId).click(function(event) {

          event.stopPropagation();
      alert(5);                   

     });
  }

代码，现在我可以单击表单上的任意位置而无需调用父单击。该表单有一个组合框。但是我现在无法单击组合框并查看列出的结果。这没用。我认为是因为，我用上面的点击事件包装了它。有什么解决办法吗？

【问题讨论】：

也分享一些代码
请创建一个 jsfiddle 示例
我会放一个代码示例

标签： javascript jquery

【解决方案1】：

您也可以在子元素点击中使用event.stopPropagation();

$("#parent").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$("#child").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});

DEMO

我检查了您编辑的问题。问题是，您正在动态创建标签。这些标签应该与委托绑定。

示例

$(document).on("click",".messagepop",function(event) {

      event.stopPropagation();
  alert(5);                   

 });

【讨论】：

感谢我使用了 event.stopPropagation();同样，我的点击功能也有问题。在我修复它之后，它起作用了。但现在我有一个新问题。在那个子表单中，我有一个带有下拉列表的表单。因为我将整个子 div 绑定到单击事件，所以我看不到下拉菜单。你有解决方案吗
@user2281246 我没有正确理解您的问题。我建议您将其作为另一个问题提出
当我们将包装好的 div 绑定到单击事件时，单击组合框/选择框以查看内容不起作用。是的，我会做的谢谢。 :)

【解决方案2】：

您需要取消孩子点击事件的默认动作（导航）。为此，您必须使用

     event.preventDefault(); 
     event.stopPropagation();

在子元素中

【讨论】：