0

jquery を使用して動的にページに画像を追加しています。基本的に、ページ上の画像の「ピクセル-y / 低解像度」バージョンを作成し、オリジナルの上にページの読み込みを追加しています。次に、典型的な「ホバーでフェードアウト」するものは、マウスオーバーでそれらをフェードアウトし、元の信号を表示する必要があります。

だから私は入ってくる画像を持っています..しかし、どういうわけかホバーリスナーが接続されていません。最初はホバーしようとしましたが、トラブルシューティングが簡単になったという理由だけで、今はクリックしています。何もない。

.on() 関数は、動的に追加されたアイテムにもアタッチする必要がありますよね? 何がうまくいかないのですか？エラーは発生しません。うまくいきません。

$.ajax({
        type:"POST",
        url:"js/pixelsandwich/pixelsandwich.php",
        data:{src:src},
        success:function(response){  // if there is already a "lo-rez" image, I get that URL.. if there isn't, one is created and I return that URL
            newImg = $("<img class='crunched'>"); // create the new <img>
            newImg.attr('src', response); // assign the source
            frame = $that.parent(); // grab the containing frame
            frame.append(newImg);  // add the new image.  css:position:absolute and z-index take care of the rest
        }
    });

$(".crunched").on("click", function(){  // << this just isn't attaching at all
     alert("hello");
    $(this).fadeTo('slow',0.5);
});

誰か助けてくれませんか？

4

2 に答える 2

2

.on() 関数は、動的に追加されたアイテムにもアタッチする必要がありますよね?

いいえ、動的に作成された要素.on()では、コードの実行時に既に存在する要素を使用してバインドする必要があります。通常、最悪のケースは body 要素ですが、DOM で選択できる要素が近いほど良い結果が得られます。

.crunched が動的に追加された要素のクラスであると仮定して、次を試してください。

$("body").on("click", ".crunched", function(){  // << this just isn't attaching at all
     alert("hello");
    $(this).fadeTo('slow',0.5);
});

jQueryドキュメントごと：

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。

于 2013-02-03T00:14:48.177 に答える
0

このonメソッドは、動的に追加された要素の現存する先祖にイベント処理を委譲するために使用する必要があります。例えば：

$(document).on("click", ".crunched", function(){  // << this just isn't attaching at all
     alert("hello");
    $(this).fadeTo('slow',0.5);
});

$(".crunched")コードを実行するとコレクションは空になるため、イベント ハンドラーは何にもアタッチされません。

于 2013-02-03T00:15:06.780 に答える