jQuery子元素如何触发父元素的点击事件

Question

我遇到了一个问题，就是在jQuery中防止子元素触发父元素的点击事件。我已经在Google上搜索了一些解决方案，但似乎都不适用于我的情况。

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

我尝试使用：

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

同时在父元素上使用.unbind("click")，因为一旦它被点击过，就不需要再次点击，但这似乎也会解除子元素的绑定。

我已经准备好了一个示例，以便更好地展示问题。

任何帮助都将非常有用！这让我感到疯狂。

- Jake Stubbs

Answer 1

问题是由于.btn-comment元素是动态添加的，所以您需要使用委托处理程序。尝试这个：

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

已更新的样例

请注意在样例中，您可以看到事件没有被传播，因为当单击按钮元素时，alert() 不会触发。

- Rory McCrossan

---

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

Answer 2

这里有几件事情。

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

- Stephen Wrighton

---

这个起作用了，当我读到第二点的时候，我立刻意识到发生了什么，出于某种原因，在你指出之前，这从未发生在我身上！ - Jake Stubbs

@ZathrusWriter - 感觉有点奇怪，好像我在 Fiddle 上最近做的一些更改没有保存。不管怎样，我已经更新了它。 - Stephen Wrighton

Answer 3

我已经更新了你的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);

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

- Zathrus Writer