jQuery子激活父点击事件答案

【问题标题】：jQuery child activating parent click eventjQuery子激活父点击事件
【发布时间】：2013-02-07 14:26:02
【问题描述】：

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

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

我尝试过使用：

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

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

我准备了fiddle 以便正确显示问题。

任何帮助都会非常棒！快把我逼疯了。

【问题讨论】：

标签： javascript jquery events dom

【解决方案1】：

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

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

Updated fiddle

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

【讨论】：

处理程序也应该委托给updater-text，否则单击文本字段会导致同样的问题。

【解决方案2】：

这里有几件事。

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

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

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

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

Updated fiddle

【讨论】：

这就像一个魅力。我一读到第 2 点就意识到发生了什么，出于某种在您指出之前从未发生过的原因！
@ZathrusWriter - 很奇怪，好像我在小提琴上所做的最后几个更改没有保存。不管怎样，我更新了它。

【解决方案3】：

我已经更新了你的小提琴，它似乎适用于我创建的内容。也放在这里供参考：

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

小提琴链接：http://jsfiddle.net/9F67j/14/

【讨论】：