Question

我正在制作商店目录，产品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之前创建事件监听器（无法挂钩）。

有什么想法吗？

Answer 1

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

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

document可以替换.pages的任何现有容器。有关详细信息，请参阅on文档，尤其请注意直接和委派活动部分。

Answer 2

您可以使用jQuery's .on() function来解决此问题。所以它可能看起来像这样：

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

（我不确定它是否需要在$(document).ready()中进行，但如果所有其他事件绑定器都在那里，那么您可以将它们保持在一起。）

这基本上做的是，它不是绑定到元素本身的click事件，而是绑定到文档的click事件（调用.on()的选择器，它可以是上面的任何父元素目标要素）。当点击发生时，该事件通过DOM冒泡。因此，在这种情况下，click事件最多可达document，然后使用此处理程序。

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

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

$（div）.click（function）on $ .ajax生成的HTML

2 个答案: