爲什麼.click（）事件不會觸發頁面呈現後創建的元素？ JQuery

這段代碼所做的是創建一個段落，其中#paragraph的值是一個textarea標記，它的工作原理非常好。爲什麼.click（）事件不會觸發頁面呈現後創建的元素？ JQuery

$('#insert_paragraph').click(function(){ 
    var text = $('#paragraph').val(); 
    $('#container').append('<p>'+text+'</p>'); 
});

而這個代碼只是增加了一個類被點擊任何p標籤，但是它只是增加了該類時創建的頁面第一次被渲染，而不是p元素與創建的p元素上面的代碼。

$('p').click(function(){ 
    $(this).addClass('box'); 
});

來源

2013-05-06 Manuel Medina

因爲當選擇原始元素時它們不存在。 http://learn.jquery.com/events/event-delegation/ – 2013-05-06 21:45:21

[動態創建元素上的事件綁定？]的可能重複（http://stackoverflow.com/questions/203198/event-binding-on-dynamically-創建元素） – Blazemonger 2013-05-06 21:46:47

當你這樣做$('p')，jQuery的出去，發現在時間在這一點上存在的p元素。所以你只把一個處理程序連接到那些處理程序，而不是稍後添加的處理程序。

您可以使用事件代理，它監視祖先元素的點擊，然後檢查它們是否與選擇器匹配。例如，文檔中的以下鉤子click只會在點擊穿過p元素時觸發，因此它不關心何時創建元素p（如果沒有其他元素將事件掛鉤並停止冒泡）：

$(document).on('click', 'p', function(){ //^ ^ ^--- the selector to filter against //| +--- the event to hook //+--- the element to hook it on $(this).addClass('box'); });

來源

2013-05-06 21:45:33

我沒有看到這是一個問題，因爲我在創建這些元素之前，我點擊它們中的任何一個。 – 2013-05-06 21:47:22

@ManuelMedina：它不是當你*點擊*時，它是在$（'p'）'代碼執行**連接**點擊處理程序時。 – 2013-05-06 21:49:00

TJ是完全正確的。您將事件綁定到所有現有段落。之後，創建的任何附加段落標籤都不會綁定到它們。

下面的代碼結合了您的事件，在段落添加後綁定段落單擊事件。您仍然需要在頁面加載後像現在這樣綁定所有現有段落。

$('#insert_paragraph').click(function(){ 
    var text = $('#paragraph').val(); 
    $('#container').append('<p>'+text+'</p>'); 

    //Bind Event to last paragraph (the one just added) 
    $('#container p:last-child').click(function(){ 
     $(this).addClass('box'); 
    }); 
});

來源

2013-05-06 22:10:48 ejc

爲什麼.click（）事件不會觸發頁面呈現後創建的元素？ JQuery

回答

相關問題