JQuery – 在生成的内容上使用选择器

我在使用javascript生成的内容上使用jquery选择器选择元素时遇到问题。

对于这一代，我使用以下function：

var articles = [ { img: { src: this.base_url + 'assets/img/frontend/placeholder.png', alt: 'Image Description' }, title : 'Title Here', text: 'Lorem ipsum dolor sit amet, consectetur adispiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ' + 'dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.' }, { img: { src: this.base_url + 'assets/img/frontend/placeholder.png', alt: 'Image Description' }, title : 'Title Here', text: 'Lorem ipsum dolor sit amet, consectetur adispiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ' + 'dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.' }, { img: { src: this.base_url + 'assets/img/frontend/placeholder.png', alt: 'Image Description' }, title : 'Title Here', text: 'Lorem ipsum dolor sit amet, consectetur adispiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ' + 'dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.' } ]; var template = Handlebars.compile( $( '#picture-above-text' ).html() ); $( 'div.editor-wrapper' ).append( template( articles ) ); 

这会在页面中插入以下html：

 
 {{#each this}} 
 
 
   
 
 
{{title}} 
 
{{text}} 
 
 
 
 {{/each}}  

到目前为止，没有问题。 但是当我使用时

 $( 'i.icon-edit' ).on( 'click', function() { alert( 'editing' ); }); 

一切都没有发生。 有谁知道为什么会这样？ 我想这是因为首次生成DOM时图标不在页面上。 有没有办法解决？

提前致谢

Answer 1

由于icon-edit是动态添加的，因此您需要使用事件委派来注册事件处理程序

 // New way (jQuery 1.7+) - .on(events, selector, handler) $(document).on('click', 'i.icon-edit', function(event) { event.preventDefault(); alert( 'editing' ); }); 

Answer 2

使用jquery委托。 Klik链接