0

ページのレンダリング時にクラスが存在する場合、次のコードが機能します。

$().ready(function () {

    $(".productzoom").on('hover click', function () {//also add this function to click
        $(this).closest(".product1").find(".image span").css('top', $(this).position().top - 200);
        $(this).closest(".product1").find(".image span").css('left', $(this).position().left + 20);
    });
});

ただし、後でコンテンツを動的に挿入すると、.productzoom クラスにカーソルを合わせたりクリックしたりすると、上記のコードが機能しなくなったようです。.on jQuery を使用すると、新しく挿入された要素にもフックがアタッチされると思いましたが、そうではありません...なぜですか?

4

2 に答える 2

1

動的要素を扱っているため、イベント委譲を利用する必要があります...そのため、.on()の構文はわずかに異なります

イベント委任の構文は次のとおりです。$(<staticelement>).on(event, <dynamic target selector>, handler)

$(document).on('hover click', ".productzoom", function () { //also add this function to click
    $(this).closest(".product1").find(".image span").css('top', $(this).position().top - 200);
    $(this).closest(".product1").find(".image span").css('left', $(this).position().left + 20);
});

コードは、次のようなはるかに優れた形式に変更できます

$(document).on('hover click', ".productzoom", function () { //also add this function to click
    var position = $(this).position();
    $(this).closest(".product1").find(".image span").css({
        'top': position.top - 200,
        'left': position.left + 20
    });
});
于 2013-11-08T02:38:20.057 に答える