Javascript html更改时关联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回调的方法吗

这里有一个JSFIDLE中的示例：

试试这个：

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++;
   });              
});​

$("#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);
});

jQuery（文档）.ready（函数（）{
var i=0；
$（“#createContent”）。单击（函数（）{
$（“#myCont”）。追加（“”）；
$（“.myImg”）.eq（i）.单击（函数（）{
$（这个）。淡出（“慢”）；
});
i++；
});              
});​

试试这个：

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++;
   });              
});​

$("#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);
});

jQuery（文档）.ready（函数（）{
var i=0；
$（“#createContent”）。单击（函数（）{
$（“#myCont”）。追加（“”）；
$（“.myImg”）.eq（i）.单击（函数（）{
$（这个）。淡出（“慢”）；
});
i++；
});              
});​

试试这个：

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++;
   });              
});​

$("#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);
});

$（“#创建内容”）。单击（函数（）{
变量img=$（''）
。单击（函数（）{
警报（“点击img”）；
$（this.hide（）；
}
);
$（“#myCont”）.append（img）；
});

试试这个：

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++;
   });              
});​

$("#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);
});

$（“#创建内容”）。单击（函数（）{
变量img=$（''）
。单击（函数（）{
警报（“点击img”）；
$（this.hide（）；
}
);
$（“#myCont”）.append（img）；
});

试试这个

这将附加元素，并仅对附加的元素进行initailize单击

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();        
                   } 
   );

  });
}) ;​

jQuery（文档）.ready（函数（）{
$（“#createContent”）。单击（函数（）{
var appendedItem=$（''）；
appendedItem.appendTo（“myCont”）
。单击（函数（）{
警报（“点击img”）；
$（this.hide（）；
} 
);
});
}) ;​

拉小提琴试试这个

这将附加元素，并仅对附加的元素进行initailize单击

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();        
                   } 
   );

  });
}) ;​

jQuery（文档）.ready（函数（）{
$（“#createContent”）。单击（函数（）{
var appendedItem=$（''）；
appendedItem.appendTo（“myCont”）
。单击（函数（）{
警报（“点击img”）；
$（this.hide（）；
} 
);
});
}) ;​

拉小提琴试试这个

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();
   });  

jQuery（文档）.ready（函数（）{
$（“#createContent”）。单击（函数（）{
$（“#myCont”）。追加（“”）；
} );
$（“#myCont”）。在（'click'，函数（事件）{
警报（“点击img”）；
$（event.target）.hide（）；
});  

}))；​

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

您可以使用event.target的标记名属性筛选图像标记

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

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

尝试此方法

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();
   });  

jQuery（文档）.ready（函数（）{
$（“#createContent”）。单击（函数（）{
$（“#myCont”）。追加（“”）；
} );
$（“#myCont”）。在（'click'，函数（事件）{
警报（“点击img”）；
$（event.target）.hide（）；
});  

}))；​

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

您可以使用event.target的标记名属性筛选图像标记

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

---

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

这应该会起到神奇的作用：

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++;
   });              
});​

jQuery（文档）.ready（函数（）{
var i=0；
$（“#createContent”）。单击（函数（）{
$（“#myCont”）。追加（“”）；
$（“.myImg”）.eq（i）.单击（函数（）{
$（这个）。淡出（“慢”）；
});
i++；
});              
});​

---

这应该会起到神奇的作用：

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++;
   });              
});​

jQuery（文档）.ready（函数（）{
var i=0；
$（“#createContent”）。单击（函数（）{
$（“#myCont”）。追加（“”）；
$（“.myImg”）.eq（i）.单击（函数（）{
$（这个）。淡出（“慢”）；
});
i++；
});              
});​

---

您能解释一下您的解决方案是什么以及它为什么有效吗？但这会多次调用函数。如果单击第6个图像，则表示它显示警报次数。这是什么原因this@Rithu：因为每当创建新映像时，新的事件处理程序都会绑定到每个现有的

.myImg

元素。这不是一个好的解决方案。

.myImg

选择类为

myImg

的所有元素，不是吗？如何确保它只选择新创建的映像？@Rithu:获取对已创建元素的引用并将事件处理程序绑定到它：

$（“”）。附加到（…）。单击（…）。虽然在我看来，事件委托是一种更好的方法。你能解释一下你的解决方案是什么以及为什么它有效吗？但是这会多次调用函数。如果单击第6个图像，则表示它显示警报次数。这是什么原因this@Rithu：因为每当创建新映像时，新的事件处理程序都会绑定到每个现有的
.myImg
元素。这不是一个好的解决方案。
.myImg
选择类为
myImg
的所有元素，不是吗？如何确保它只选择新创建的映像？@Rithu:获取对已创建元素的引用并将事件处理程序绑定到它：
$（“”）。附加到（…）。单击（…）。虽然事件委派在这里是一种更好的方法，但如果您可以使用jQuery，则无需使用普通DOM接口。虽然可以使用它来提高性能，但是在这个ca中