0

我正在制作商店目录，产品 HTML 是通过 $(document).ready(function() 上的 $.AJAX 请求生成的。

  $.ajax({
  url: "../includes/geracatalogo.php",
  method: "post",
  data: {tipos: tipos, categorias: categorias, pagina: pagina},
  success: function(html){
     $("#produtos").empty();
     $("#produtos").fadeOut(0);
     $("#produtos").append(html);
     $("#produtos").fadeIn(700);
       }
});
});

现在，在这个 HTML 上，我有页码（所有页面并选择了一个）。我想在这个页面按钮上添加一个 .clickEvent。

$(".pages").click(function(){
$(this).toggleClass('selected');
});

我的疑问是，我把上面的片段放在哪里？关于成功函数？还是在 $.Ajax 之外？

问题是：如果我把它放在 $(document).ready(function() 上，事件监听器将在 DIV 之前创建（无法挂钩）。

有任何想法吗？

4

2 回答 2

2

在成功函数之外定义它。您可以使用事件委托将事件处理程序挂钩到尚不存在的元素。

$(document).on('click', '.pages', function(){
    $(this).toggleClass('selected');
});

document可以替换，但任何现有的.pages. 有关更多详细信息，请参阅on文档，特别要注意Direct and delegated events部分。

于 2013-04-17T17:56:36.010 回答
0

你可以使用jQuery 的.on()函数来解决这个问题。所以它可能看起来像这样：

$(document).ready(function () {
    $(document).on('click', '.pages', function () {
        $(this).toggleClass('selected');
    });
});

（我不确定它是否需要做，$(document).ready()但如果所有其他事件活页夹都在那里，那么你不妨把它们放在一起。）

这本质上所做的是，它不是绑定到元素本身的单击事件，而是绑定到文档的单击事件（.on()被调用的选择器，可以是目标元素之上的任何父元素）。当点击发生时，该事件会通过 DOM 冒泡。因此，在这种情况下，点击事件document开始使用此处理程序。

第二个参数是过滤点击事件的选择器。因此，虽然这个处理程序在技术上接收所有在 DOM 中冒泡的点击事件，但它会忽略任何与选择器不匹配的事件。（在这种情况下，.pages。）最后，还有用于响应事件的函数。

由于这只绑定一次到一个总体父元素，它不需要在添加子元素时重新绑定。这些元素可以随心所欲地添加和删除，相关的点击事件发生在它们之上。此外，由于它只绑定一次，因此与将同一个处理程序绑定到许多子元素相比，性能有所提高。

于 2013-04-17T17:59:56.077 回答