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

我在用javascript生成的内容中选择具有jQuery选择器的元素时遇到问题。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第一次生成时，图标不在页面上。有没有办法解决？

在此先感谢

来源

2013-07-01 xonorageous

可能重复（http://stackoverflow.com/questions/15090942/jquery-on-not-working-on-dynamic-content） –

尝试在这行之后附加'click'：'$（'div.editor-wrapper'）.append（template（articles））;' – Cherniv

[如何为jQuery listview中的特定链接创建点击事件] ：//stackoverflow.com/questions/17301307/how-to-create-click-event-for-specific-link-in-a-jquery-listview） – Omar

由于icon-edit动态添加，你需要使用event delegation注册事件处理程序

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

来源

2013-07-01 06:19:49

非常感谢您的答案。它完美的作品。 @dystroy：谢谢你，对不起，我没有找到你链接到的文章，我看了之前问，但没有找到那篇文章 – xonorageous

你可以添加“这个”选择器，i.icon-edit吗？ – nick

使用jQuery代表。 Klik link

的[jQuery的。对（）不工作的动态内容]

来源

2013-07-01 06:20:20 elrado

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

回答

相关问题