jQuery子级激活父级单击事件

jQuery child activating parent click event

本文关键字：单击 事件 激活 jQuery      更新时间：2023-09-26

我在jQuery中遇到了阻止子元素激活父点击事件的问题。我在谷歌上搜索过，偶然发现了几个不同的解决方案，但似乎都不适合我

我需要在点击后使表格单元格可编辑，这样我就可以通过ajax异步提交编辑后的文本。我使用jQuery将文本替换为输入字段，但由于每次单击都会再次触发父事件，因此无法编辑或提交文本。

我尝试过使用：

$("child").click(function(e){  
  e.stopPropagation();
})

还有父对象上的.unbind("click")，因为一旦单击它，就不需要再次单击，但这似乎也解除了子对象的绑定。

我准备了一把小提琴，以便恰当地说明这个问题。

任何帮助都是超级棒的！它把我逼疯了。

问题是因为.btn-comment元素是动态附加的，所以您需要一个委托的处理程序。试试这个：

$(".td-edit").on('click', '.btn-comment', function(e) {
    e.stopPropagation();
});

更新的小提琴

请注意，您可以看到事件没有传播，因为单击button元素时alert()不会激发。

这里有几件事。

  1. 每次单击表格单元格时，都会重新生成表单元素。这不仅包括单击单元格以将内容切换到编辑控件，还包括单击文本字段以将焦点集中在它上以执行文本更改
  2. 单击您的按钮将永远不会触发，因为它在控件存在于dom中之前就被绑定了

我的建议是让控件已经存在于页面上，但点击元素是为了控制文本框的可见性。此外，将要单击的文本放入span或label或div中，并以这种方式单击它，而不是实际的单元格。

$("#td-edit").click(function() {
    $("#td-edit").hide();
    $("#dvEdit").show();
});
$("#btn-comment").click(function(e) {
    $("#td-edit").show();
    $("#dvEdit").hide();
});

更新的fiddle

我已经更新了你的fiddle，它似乎与我创建的一样工作。放在这里也供参考：

function clickEdit() {
    $(this).html("<div class='"input-append'"><input class='"updater-text span2'" type='"text'" value='"" + $(this).text() + "'" /><button class='"btn-comment'" type='"button'" id='"appendedInputButton'">Save</button>").off('click');
    $('#appendedInputButton').on('click', function(e) {
       e.stopPropagation();
       e = $(this);
       console.log(e.prev().val());
       e.parent().html(e.prev().val()).on('click', clickEdit);
    });
}
$(".td-edit").on('click', clickEdit);

Fiddle链接：http://jsfiddle.net/9F67j/14/

相关文章：