訪問動態添加元素的Jquery

Question

可能重複：
dynamically added class can’t be called
jquery does not select jquery added element

我試圖通過類名來訪問動態添加的元素，但不能。

樣本HTML：

<div class="foo">static foo (click to trigger alert)</div> 
<br /> 
<br /> 
<a id="add">add dynamic foo</a> 
<br /> 
<div id="items"></div> 

樣品的Jquery：

$(function(){ 

    var c = 1; 

    $('#add').click(function() { 

     $('#items').append('<div style="background:red" id="item' + c + '">\n\ 
           Hello World ' + c + '\n\ 
          </div>\n\ 
          <div class="foo">dynamic foo ' + c + 'clicking me should alert?</a>'); 

     c++; 

    }); 

    $('.foo').click(function() { 
     alert('tst'); 
    }); 

}); 

演示：http://jsfiddle.net/D3gGH/

正如你可以在演示中看到，點擊動態添加<div class="foo">應觸發警報，但它沒有。如何正確地做到這一點？

Answer 1

使用on代替click

$(function(){ 

    var c = 1; 

    $('#add').click(function() { 

     $('#items').append('<div style="background:red" id="item' + c + '">\n\ 
           Hello World ' + c + '\n\ 
          </div>\n\ 
          <div class="foo">dynamic foo ' + c + 'clicking me should alert?</a>'); 

     c++; 

    }); 

    $(document).on('click','.foo', function(e) { 
     alert('tst'); 
    }); 

});​ 

Working DEMO

Answer 2

使用事件代表團與動態創建的元素打交道時，儘量避免過度使用的文檔或document.body的用於大型委派事件文件 - 見reference。

$('#items').on("click", ".foo", function() { 
    alert('tst'); 
});