$(div).click(function) on $.ajax generated HTML

Question

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

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

我的疑问是，我把上面的代码片段放在哪里?关于成功函数?

问题是:如果我把它放在$(document).ready(function()上，事件侦听器将在DIV(失败钩子)之前创建。

任何想法?

Answer 1

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

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

document可以替换，但.pages的任何现有容器。详细信息请参见on文档，特别要注意直接和委托事件部分。

Answer 2

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

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

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

这样做的本质上是，它不是绑定到元素本身的click事件，而是绑定到文档的click事件(调用.on()的选择器，它可以是目标元素之上的任何父元素)。当单击发生时，该事件通过DOM冒出来。因此，在本例中，click事件到达document，然后CC_11使用此处理程序。

第二个参数是筛选单击事件的选择器。因此，虽然这个处理程序从技术上接收所有在DOM中冒出的单击事件，但它将忽略任何与选择器不匹配的事件。(本例中为.pages。)最后，是用于响应事件的函数。

因为它只绑定一次父元素，所以不需要在添加子元素时重新绑定。这些元素可以随意添加和删除，所讨论的单击事件发生在它们上面。而且，由于它只绑定一次，因此与将相同的处理程序绑定到许多子元素相比，性能有所提高。