7

私はここにこのサイトを持っています

ご覧のとおり、[画像]タブと[Webテンプレート]タブには小さな画像スライダーがあり、画像は右から左にスライドしてから消え、親要素の最後に表示されます（<tr>私の場合は） 。

小さな画像にカーソルを合わせると、左側にプレビューが表示されます。

ここまでは順調ですね。

ただし、最初の画像が再び表示されるまで待つと、ホバーイベントは機能しなくなります。

<tr>jqueryがタグ の最後に追加された新しい要素を認識できない可能性はありますか？

4

5 に答える 5

13

イベントをバインドする方法は、動的に追加された要素では機能しません。Preview_script.jsには、次のものがあります。

$(".box_body img").hover(function(){

これにより、クラス「box_body」のすべてのimgタグにイベントハンドラーが追加されますが、後で追加されたものはイベントを取得しません。

これを試して：

$(document).on("hover", ".box_body img", function() {..});

これにより、イベントがドキュメントに追加され、eventtargetがimgでclass="box_body"の場合にのみ発生します。イベントは伝播するので、ドキュメントに到達する前にイベントを停止するものがない限り、これは機能するはずです（ "event.stopPropagation（）"を呼び出すことにより）

「.box_bodyimg」の親を知っている場合は、ドキュメントをそれに置き換えることができます。イベントがドキュメントに伝播するのを待つ必要がないため、これは少しうまく機能します。

デリゲートを使用して同じことを実行できることに注意してください（オンが使用できない場合）。

$(document).delegate(".box_body img", "hover", function() {..});
于 2012-06-01T20:12:58.513 に答える
2

将来作成される要素にイベントハンドラーをアタッチするには、jQueryの.live（）関数を使用する必要があります。これがドキュメントです：http：//api.jquery.com/live/ ここでの使用法：

$(".dynamicButtons").live("hover", function() {
    //do stuffs
});
于 2012-06-01T20:16:21.157 に答える
2

ここのscript.js変更ファイルでhttp://web-art.netau.net/script.js 

$(".box_body img").hover(function(){
            var src=$(this).attr("src");
            var target=$(this).parents("table").attr("id").split("_").pop();
            $("#preview_"+target).attr({src:src});
})

次の行112から116

$(document).on('mouseenter',".box_body img",function(){
        var src=$(this).attr("src");
        var target=$(this).parents("table").attr("id").split("_").pop();
        $("#preview_"+target).attr({src:src});
});

この背後にある理由は、SOで何度も答えられています。良い答えを検索して見つけてください。好き

動的に作成された要素のイベントバインディング？

jQueryで、動的なhtml要素にイベントをアタッチする方法は？

動的にロードされたhtml要素へのjqueryバインディングイベント

于 2012-06-01T20:22:27.600 に答える
0

そこにあるいくつかのコードは役に立つでしょう。

アイテムを最初から削除してから、スライダーの最後に挿入していますか？

答えが「はい」の場合は、

$('selector').delegate('subselector', 'hover', function() {
    //your code there
});

それ以外の

$('selector subselector').hover( function() {
    //your code there
});

詳細については、 http：//api.jquery.com/delegate/を確認してください。

于 2012-06-01T20:21:40.623 に答える
0

javascriptに新しく追加された要素をうまく処理するのに役立つlivequeryを使用することを強くお勧めします。使用例は次のとおりです。

 $('.elementAdded').livequery('event',function(){
    //do stuff
 })

イベントをアイテムに1回だけバインドするため、使用時にいくつかの問題が発生し.on()ました（たとえば、ドキュメントの準備ができた後）。

それが役に立てば幸い。

于 2012-06-01T20:21:57.620 に答える