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的孩子激活父母點擊事件

回答

相關問題