jquery - 插入的 HTML 上没有 jQuery

Question

我在页面的头部加载了 jQuery，在点击某个类的元素时做一些事情。

$(function(){
  $(".addtocal").click(function(){
  $(this).next('.addToCalOptions').fadeIn('fast');
  return false;
  }
);
});

它适用于页面上已经存在的所有 .addtocal 元素。但不是通过 jQuery .load 函数在页面中插入一堆类似的元素。

现在我很确定我必须在 .on() 函数中使用“委托事件方法”。正确的？

但是，这不起作用：

$(function(){
  $("a").on("click", ".addtocal", function(){
  $(this).next('.addToCalOptions').fadeIn('fast');
  }
);
});

我迷路了。有什么想法吗？谢谢！

Answer 1

您可以使用文档作为委托，因为委托必须是静态的（不是动态添加的）：

$(function(){
  $(document).on("click", ".addtocal", function(){
  $(this).next('.addToCalOptions').fadeIn('fast');
  }
);

但更好的是使用最近的静态容器而不是文档。

Answer 2

尝试这个：

$(function(){
    $(document).on("click", ".addtocal", function(){
        $(this).next('.addToCalOptions').fadeIn('fast');
    }
);

Answer 3

先试试这个document，如果这确实有效，可能a不是 .addtocalDOM 中已经存在的容器。然后，您可以缩小document到 DOM 中已经存在的容器。

$(function(){
  $(document).on("click", ".addtocal", function(){
  $(this).next('.addToCalOptions').fadeIn('fast');
  }
);

如果您确定容器，您可以将其写为：-

 $(function(){
      $("containerSelector").on("click", ".addtocal", function(){
      $(this).next('.addToCalOptions').fadeIn('fast');
      }
    );

Answer 4

您必须on正确使用 jQuery 语法。对于onAPI，您不需要添加就绪事件，因为它仅在您单击项目后才会触发

$(document).on("click", ".addtocal", function(){
    $(this).next('.addToCalOptions').fadeIn('fast');
}