使用过滤器后重新激活代码

Question

我不太了解 jQuery 与 jQuery 迁移的结合。我正在处理的站点使用 jQuery 1.12 和迁移版本 1.4.1

经过一些搜索，下面的脚本在页面加载时工作正常：

jQuery(".single_add_to_cart_button").click(function(e) {
    e.preventDefault();
    var url = jQuery(this).data('href');
    window.open(url, '_blank');
    return false;
});

但是在一些过滤器以老式的方式构建之后，这个监听器是 'forgotten'。

怎么办？

Answer 1

如果匹配 .single_add_to_cart_button 的元素被删除并且 re-added，您需要使用委托，也就是将侦听器放置在始终存在的元素（正文、文档）上，然后仅运行它在与您给定查询匹配的元素上，例如：

jQuery(document).on('click', '.single_add_to_cart_button', function (e) {
    e.preventDefault();
    var url = jQuery(this).data('href');
    window.open(url, '_blank');
    return false;
});

Answer 2

您正在删除附加侦听器的元素。这可能发生在过滤时。如果您在父元素上设置侦听器，则可以规避该行为，而父元素根本不会被删除（例如，在 <td> 中 <table> 元素）。我不会将侦听器设置在顶层 (document)，因为将它设置在父级上性能要好得多，父级不会被删除。如果将侦听器设置为 document，每次点击都会被监视并搜索 .single_add_to_cart_button 元素。

您可以将侦听器设置为父级，但如果您使用以下代码段，则仅对 .single_add_to_cart_button 上的点击做出反应：

jQuery("#tableWithId").on("click", ".single_add_to_cart_button", function(e) {
    e.preventDefault();
    var url = jQuery(this).data('href');
    window.open(url, '_blank');
    return false;
});

使用过滤器后重新激活代码

Reactivate code after filter is used

jquery

jquery-migrate