動態創建元素的事件監聽器

-2

如何給動態創建的元素添加事件監聽器？在下面的例子中，在所有這些代碼執行變量term_num後遞增1（term_num ++），所以每次調用#abtn click事件時，都會創建一個新的div元素「term_ [term_num]」。我如何給每個這些新的div一個點擊事件監聽器？動態創建元素的事件監聽器

$(document).ready(function() { 
$("#abtn").click(function(event) { 
     var newterm = '<div id=\'term_'+term_num+'\'>'+term+' </div>'; 
     var term = document.getElementById("term_input").value; 
     $('#terms').after(newterm);

來源

2014-01-21 user3152309

你最好使用一個類，並使用委託綁定事件 –

可能重複的[事件綁定動態創建的元素？]（http://stackoverflow.com/questions/203198/event-binding-動態創建元素） –

如果您喜歡答案，請不要忘記單擊答案左側的複選標記，並在投票箭頭下方「接受」最好的答案。這也會給你一些聲望點！如果稍後有更好的答案，你可以切換到那個答案。如果你還沒有參加SO巡演，請在這裏查看：http：//stackoverflow.com/tour – m59

你可以只用.on()註冊它提前：Live demo (click).

$(document).on('click', 'some-selector', function() { 

});

或追加其之前創建的DOM元素newTerm並附直接功能：Live demo (click).

var $newTerm = $(newTerm); 

$newTerm.click(function() { 

});

S因此，您添加到元素的選擇器是一個動態ID，我建議在這裏使用第二種方法。如果要將類添加到生成的元素，以便您可以將.on委託給它們，請使用.on。它更高效。

來源

2014-01-21 19:37:06 m59

+1這兩種解決方案，但代表團避免必須綁定讓我們說幾百個相同的處理程序 –

@ A.Wolff好點，我對此進行了更新。 – m59

創建它們時添加一個類。

var newterm = '<div class="termsDiv" id=\'term_'+term_num+'\'>'+term+' </div>';

您需要使用Event Delegation來動態創建元素。您必須使用委託事件方法使用.on()。

即

$(document).on('event', 'selector', callback_function)

例

$(document).on('click', '.termsDiv', function(){ 
    //Your code 
    alert("clicked me"); 
});

在地方的document你應該用最接近的靜態容器。

如果你願意，你可以使用Attribute Starts With Selector [name^="value"]

$(document).on('click', 'div[id^="term_"]', function(){ 
    //Your code 
    alert("clicked me"); 
});

的委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，我們可以使用委託事件將click事件綁定到動態創建的元素，並避免頻繁附加和移除事件處理程序。

來源

2014-01-21 19:37:41 Satpal

動態創建元素的事件監聽器

回答

相關問題