3

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

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

我试过使用：

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

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

为了正确显示问题，我准备了一个小提琴。

任何帮助都将是超级的！这让我疯狂。

4

3 回答 3

3

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

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

更新的小提琴

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

于 2013-02-07T14:30:17.277 回答
1

这里有几件事。

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

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

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

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

更新的小提琴

于 2013-02-07T14:31:21.847 回答
0

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

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/

于 2013-02-07T14:41:20.450 回答