我在使用 javascript 生成的内容上使用 jquery 选择器选择元素时遇到问题。
对于这一代,我使用以下功能:
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:
<div class="row insumo-editor-module" style="display: none;">
{{#each this}}
<article class="span4" article-tile>
<figure>
<div class="figure-holder">
<img src="{{img.src}}" alt="{{img.alt}}">
<span class="figure-indicator"></span>
</div>
<figcaption>
<div class="editable"><h4>{{title}} <i class="icon-edit"></i></h4></div>
<div class="editable"><p>{{text}} <i class="icon-edit"></i></p></div>
</figcaption>
</figure>
</article>
{{/each}}
</div>
到目前为止,没有任何问题。但是,当我使用
$( 'i.icon-edit' ).on( 'click', function() {
alert( 'editing' );
});
什么都没有发生。有谁知道为什么会这样?我猜这是因为第一次生成 DOM 时图标不在页面上。有没有办法解决?
提前致谢