Question

我遇到阻止子元素在jQuery中激活父点击事件的问题。我已经谷歌了，并偶然发现了几个不同的解决方案，其中任何一个似乎都不适合我。

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

我尝试过使用：

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

还有.unbind("click")在父母身上，因为一旦被点击它就不需要再次点击了，但这似乎也解开了孩子。

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

任何帮助都是超级的！这让我发疯了。

Answer 1

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

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

Updated fiddle

在小提琴中注意 - 您可以看到事件未被传播，因为单击alert()元素时button不会触发。

Answer 2

这里有几件事。

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

我的建议是让控件已经存在于页面上，但是单击该元素可以控制文本框的VISIBLITY。此外，将要单击的文本放入范围或标签或div中，然后单击该方式，而不是实际单元格。

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

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

Updated fiddle

Answer 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/

jQuery子激活父点击事件

3 个答案: