JQuery - 在生成的内容上使用选择器 [英] JQuery - Use selectors on generated content

问题描述

对于第一代，我使用以下函数：

  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。 '
}，
 {
 img：{src：this.base_url +'assets / img / frontend / placeholder.png'，alt： '图像描述'}，
标题：'标题在这里'，
文本：'Lorem ipsum dolor sit amet，consectetur adispiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet'+ 
'dolore大a am er。。 '
}，
 {
 img：{src：this.base_url +'assets / img / frontend / placeholder.png'，alt： '图像描述'}，
标题：'标题在这里'，
文本：'Lorem ipsum dolor sit amet，consectetur adispiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet'+ 
'dolore大a am er。。 Ut; en im;;;;;;;;;;;;;;;;;;'
} 
]; 
 
 var template = Handlebars.compile（$（'＃picture-above-text'）.html（））; 
 $（'div.editor-wrapper'）.append（template（articles））; 
  

在页面中插入以下html：

 < div class =row insumo-editor-modulestyle =display：none;> 
 {{#each this}} 
< article class =span4article-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首次生成时，图标不在页面上。有没有办法？

提前感谢

解决方案

由于动态添加图标编辑，因此您需要使用事件委托注册事件处理程序

  //新方法（jQuery 1.7+） -  .on（事件，选择器，处理程序）
 $（document）.on（'click'，'i.icon-edit'，function（event）{
 event.preventDefault（）; 
 alert（'editing' ）; 
}）; 
  

I'm having problems selecting elements with jquery selectors on content generated with javascript.

For the generation I use the following 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 ) );

This inserts the following html in the page :

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

Up to this point there are no problems. However when I use

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

nothing is happening. Does anyone know why this is happening? I guess it's because the icon wasn't on the page when the DOM was first generated. Is there any way around this?

Thanks in advance

解决方案

Since the icon-edit is added dynamically, you need to use event delegation to register the event handler

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

这篇关于JQuery - 在生成的内容上使用选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！