javascript - jquery 事件函数无法正常工作

Question

我有一个页面，其中使用 jquery 和 ajax 从数据库中显示内容。页面中有很多过程，例如添加新内容和图像、编辑、删除等，并且都使用 ajax。但是现在一些事件函数，如click，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
   }

请帮我解决这个问题。

score 3 · Accepted Answer

尝试：

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

});

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

什么$("#content").on("click", ".img")是提供事件委托。因此，真正发生的是一个事件侦听器，该侦听器$("#content")仅在该事件来自具有匹配选择器的后代（.img在本例中）时才被触发。

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

0

像这样试试

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

于 2013-10-04T06:38:45.013 回答

3 回答 3