1

重複の可能性:
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/

4

5 に答える 5

1

これを試して：

$("#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);
});
于 2012-12-27T12:43:45.683 に答える
0

これを試して

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 イベント オブジェクトを参照してください。

この方法は、複数のバインドを回避するのに役立ちます。

于 2012-12-27T12:48:47.983 に答える
0

これを試して...

これは要素を追加し、追加された要素のみにクリックを初期化します

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

  });
}) ;​

ここでフィドル

于 2012-12-27T12:47:23.747 に答える
0

これを試して：

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

デモ

于 2012-12-27T12:29:02.360 に答える
0

これは魔法を行うはずです：

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

デモ

于 2012-12-27T13:07:26.383 に答える