js動態添加事件-事件委託

做者：白狼 出處：http://www.manks.top/javascript-dynamic-event.html 本文版權歸做者，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。 其所謂的動態添加事件實質就是指js中的事件委託。

咱們知道在js中，事件處理只能綁定在當前被選中的元素上，換句話也就是說，事件處理只能綁定在當前文檔已經存在的元素上！可是，每每小夥伴們都會遇到一個問題就是，個人元素是後來動態添加到頁面的，而我又想給該元素綁定事件，怎麼處理？

爲了說明白這一問題，咱們假設須要給後來添加到當前頁面的元素添加click事件。

解決這一問題的核心就是利用js的委託事件。委派事件的優點就是能夠給未存在的元素綁定事件，並且委派事件每每開銷也會更小！

題外話：舉一個最簡單的例子：當頁面上有1000個div的時候，若是直接給div綁定click事件，其會爲1000個元素綁定事件。可是，若是用事件委託，只須要一個元素綁定事件便可。PS:但願囉裏囉嗦可以讓你明白事件委託的含義。

咱們只是想知道動態建立的元素如何添加事件，你說這麼多作什麼，作什麼...

好吧，言歸正傳，看具體實現：

// 模擬動態建立元素li
$.ajax({
    type: 'get',
    data: {},
    success: function () {                
        $('<li>').addClass('aaa').html('11111111').appendTo($('body'));
    },
});

<span class="redactor-invisible-space">// 給爲咱們剛剛動態建立的元素添加事件
$(document).on('click', 'li[class=aaa]', function(){
    console.log('ddd');
});</span>

[考慮目前國內網站大部分採集文章十分頻繁，更有甚者不註明原文出處，原做者更但願看客們查看原文，以防有任何問題不能更新全部文章，避免誤導！] 查看原文