Question

当页面呈现时出现类时，以下代码有效：

$().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会在新插入的元素上附加钩子，但它不会......为什么？

Answer 1

根据jquery .on() doc，事件处理程序仅绑定到当前选定的元素;在您的代码调用.on()时，它们必须存在于页面上。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，因此您需要执行以下操作：

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

Answer 2

由于您正在处理动态元素，因此您需要使用事件委派...因为.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
    });
});

使用.on事件时，jQuery函数没有挂钩

2 个答案: