jQuery的孩子激活父母点击事件

我有问题，防止在jQuery中的子元素激活父母点击事件。我曾经在谷歌周围发现过几种不同的解决方案，但这些解决方案似乎都不适合我。jQuery的孩子激活父母点击事件

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

我已经尝试使用：

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

父

而且还.unbind("click")因为一旦它被点击的时候，将不需要再次点击但这似乎解除绑定的孩子了。

为了正确显示问题，我准备了fiddle。

任何帮助都会超级！这让我疯狂。

来源

2013-02-07 Jake Stubbs

这里有一些东西。

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

我的建议是让页面上的控件已经存在，但点击元素用于控制文本框的VISIBLITY。此外，将文本点击到一个范围或标签或div，并点击它，而不是实际的单元格。

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

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

Updated fiddle

来源

2013-02-07 14:31:21

这就像一个魅力。当我读到第2点时，我意识到发生了什么事情，出于某种原因，在你指出它之前从未发生过！ –

你的小提琴在我的Chrome上不起作用 –

@ZathrusWriter - 这很奇怪，好像我在小提琴上做出的最后几个变化没有保存。无论如何，我更新了它。 –

问题是因为.btn-comment元素被动态追加，所以你需要一个委托处理程序。在小提琴

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

Updated fiddle

注意 - 你可以看到不被传播的事件，因为点击button元素时alert()不火：试试这个。

来源

2013-02-07 14:30:17

处理程序也应该下放给'更新-text'，否则单击文本字段会导致同样的问题。 – Boaz

@Boaz好点 –

我已经更新了你的小提琴，它似乎与我创造了什么工作。在这里把它也作为参考：

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-07 14:41:20

jQuery的孩子激活父母点击事件

回答

相关问题