javascript - html更改时关联jquery回调

Question

可能重复：
使用 jQuery 自动将事件处理程序添加到新创建的元素

我需要在动态内容上关联一个 jquery 回调。

例如：

<script type="text/javascript">
jQuery(document).ready(function() {

   $("#createContent").click(function(){
       $("#myCont").append('<img  class="myImg" src="icon.png"  />');

   });

});
</script>

<span id="createContent">click me</span>
<div id="myCont"></div>

如果我点击“点击我”，它会添加一个图像..好吧，现在我想在所有创建的图像上关联一个 JQuery 回调，但是如果我在 .ready() 中添加这个代码，它就不起作用。

$(".myImg").click(function(){
       alert("click on img"); 
       $(this).remove();
} );

有一种方法可以在运行时关联 JQuery 回调吗？

这里有 jsFiddle 中的示例：http: //jsfiddle.net/fM8Z7/

score 1 · Accepted Answer

试试这个：

$("#createContent").click(function () {
    var img = document.createElement('img');
    img.setAttribute('class', 'myImg');
    img.setAttribute('title', 'blabla');
    img.setAttribute('src', 'http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png');

    img.addEventListener('click', function () {
        alert("click on img");
        $(this).hide();
    });
    $("#myCont").append(img);
});

这将创建 1 个img元素，设置它的属性，添加一个事件侦听器，然后将图像附加到#myCont.

或纯 jQuery：

$("#createContent").click(function () {

    var img = $('<img class="myImg" title="blabla" src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png" />')
        .click(function () {
            alert("click on img");
            $(this).hide();
        }
    );
    $("#myCont").append(img);
});

score 0 · Accepted Answer

试试这个：

jQuery(document).ready(function() {
    var i = 0;
   $("#createContent").click(function(){
       $("#myCont").append('<img  class="myImg" title="blabla"  src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png"  />');
       $(".myImg").eq(i).click(function() {
           $(this).fadeOut('slow');
       });
       i++;
   });              
});

演示

score 0 · Accepted Answer

试试这个...

这会附加元素并仅初始化对附加元素的单击

jQuery(document).ready(function() {
   $("#createContent").click(function(){
       var appendedItem= $('<img  class="myImg" title="blabla"  src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png"  />');
      appendedItem.appendTo("#myCont")
                  .click(function(){
                      alert("click on img");
                      $(this).hide();        
                   } 
   );

  });
}) ;

在这里摆弄

score 0 · Accepted Answer

试试这个

jQuery(document).ready(function() {
   $("#createContent").click(function(){
   $("#myCont").append('<img  class="myImg" title="blabla"  src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png"  />');  

} );
$("#myCont").on('click', function(event){
        alert("click on img");          
        $(event.target).hide();
   });

});</p>

由于绑定事件时“.myImg”类不存在，因此您必须将点击事件绑定到现有元素。您可以使用“事件”对象获取单击的图像。

您可以使用 event.target 的 tagName 属性过滤图像标签

探索 jquery 事件对象以获取更多数据。

此方法有助于避免多个绑定。

score 0 · Accepted Answer

这应该会变魔术：

jQuery(document).ready(function() {
    var i = 0;
   $("#createContent").click(function(){
       $("#myCont").append('<img  class="myImg" title="blabla"  src="http://icons.iconarchive.com/icons/mid-nights/santa/128/christmas-coupons-icon.png"  />');
       $(".myImg").eq(i).click(function() {
           $(this).fadeOut('slow');
       });
       i++;
   });              
});

演示

javascript - html更改时关联jquery回调

5 回答 5

Related

Reference