動態添加javascript不工作，但靜態代碼工作正常嗎？

這是我正在做的...我有一個文本框，用戶鍵入內容並點擊添加圖標。這引發了一些jquery代碼，將它們鍵入的項目添加到「內容」div中的範圍內。生成的代碼在懸停時出現一個刪除圖標，單擊時應該使該跨度消失。如果代碼已經在頁面上（在文檔加載之前），但是如果它是動態創建的，它會在點擊刪除功能中失效。動態添加javascript不工作，但靜態代碼工作正常嗎？

這裏是一個的jsfiddle所以你可以看到它在行動：http://jsfiddle.net/WF32y/

我能做些什麼來解決這個問題？我基本上想要在這裏輸入標籤（stackoverflow.com）時發生什麼。

來源

2012-10-11 compcentral

事件代表團，前5名JS/jQuery問的問題.. –

這是什麼意思？你能爲我指出正確的方向嗎？謝謝。 – compcentral

我剛剛做了，檢查答案。 '=]' –

使用event delegation動態添加元素通過改變這樣的：

$('a.delete').on('click', function(e) {

進入這個：

$(document).on('click', 'a.delete', function(e) {

Fiddle

.on() Direct and delegated events reference

另外，關於性能，可以附加與document（例如，動態添加的元素）更接近的祖先的處理程序。一個靜態包裝元素）。

來源

2012-10-11 22:07:23

非常好。我知道這一定很簡單。謝謝！ – compcentral

您可以通過委託輕鬆完成。你的情況：

$('#container').delegate('a.delete','click', function(e) { 
    e.preventDefault(); 
    taskID = $(this).closest('.task')[0].id; 
    $(this).closest('.task').fadeTo(300, 0, function() { 
     $(this).animate({ 
      width: 0 
     }, 200, function() { 
      $(this).remove(); 
     }); 
    }); 
});

而且通過FYI方式：

// jQuery version 1.4.3+ 
$('#container').delegate('a.delete'... 

// jQuery 1.7+ 
$('#container').on('click', 'a.delete', function(e) {

它比更快，更屬性格式的方法：

$(document).on('a.delete'...

或：

$('body').delegate('a.delete'...

或：

$(document).delegate('a.delete'...

來源

2012-10-11 22:10:26

請注意，在jQuery版本> = 1.7中綁定處理程序的標準/首選方式是'.on'，請查看（不建議使用的）['.live'方法頁面]（http://api.jquery.com/live /），這也是過去爲事件授權目的服務的。 –

感謝您的多個答案。我仍然熟悉jQuery，所以這很有幫助。看起來Fabricio擊敗了你，但我很欣賞答案。 – compcentral

@Fabrício馬特你是對的我不知道。但即使使用on方法，使用它的最好方法是使用父元素：$（'＃container'）。on（'click'，'a.delete'，function（e）{而不是document或body（我也只是更新了我的答案） –

動態添加javascript不工作，但靜態代碼工作正常嗎？

回答

相關問題