jquery事件函数无法正常工作

Question

我有一个页面，其中使用jquery和ajax从数据库显示内容。页面中有很多进程，如添加新内容和图像，编辑，删除等，所有进程都使用ajax。但是现在某些事件功能（如单击， mouseenter ）在数据库中显示的内容中不起作用。

例如：这就是我在页面中显示图像的方式

for(var i=0;i<images.length;i++)
{
$("#content").append("<img src='"+images[i]+"' class='img'  width='300' height='200' />");
}

正确显示图像。但是当试图对像这样的图像中的点击事件做某事时，它不起作用

 $("#content .img").on('click',function()
  {
  //here comes my process, but its not working
   }

请帮我解决这个问题。

Answer 1

尝试：

$("#content").on("click", ".img", function() {

});

问题是$("#content img")创建了一个jQuery集合，这些元素在运行时存在。当您开始动态添加新元素时，它们没有自动应用事件侦听器。

$("#content").on("click", ".img")为事件委派提供了什么。所以真正发生的是一个应用于$("#content")的事件监听器，但只有当该事件来自具有匹配选择器的后代（在这种情况下为.img）时才会触发。

http://api.jquery.com/on/的更多信息。

Answer 2

试试这个

$(document).on('click', '#content .img',function()
{
  ...
});

Answer 3

当您尝试添加一些动态内容时，将始终出现此问题。因此，要解决这个问题，请始终牢记一点。

• 所有使用一些静态元素来引用您尝试应用事件的动态。 示例：在您的情况下尝试使用

  $("#content").on('click', 'img', function(){ //try using this way make your code works fine.! });