2012-11-25 184 views
-1

可能重复:
dynamically added class can’t be called
jquery does not select jquery added element访问动态添加元素的Jquery

我试图通过类名来访问动态添加的元素,但不能。

样本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">应触发警报,但它没有。如何正确地做到这一点?

+1

复制右侧的整个相关部门以及进入上()问题标题 – PeeHaa

+1

使用**时,你有名单的**,而不是**点击()** –

回答

2

使用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

0

使用事件代表团与动态创建的元素打交道时,尽量避免过度使用的文档或document.body的用于大型委派事件文件 - 见reference

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