0

我正在尝试在用户单击按钮后生成的元素上注册 mouseover 事件。

元素是通过 ajax 生成的。mouserover 似乎不适用于 ajax 创建的元素。我想知道是否有办法解决这个问题。非常感谢。

jQuery.ajax({
        type: "GET", 
        url: "http://list.php", 
        data: null, 
        dataType:"json", 
              timeout: 10000,
              global: true,
              error: oh_no,
        success: 
     });

var image = document.getElementById('image');

the image path are from ajax.

function listem(){
 ......codes
 ......codes

 image.innerHTML=  image.innerHTML + "<img src="\" + imagePath + \"\>";
} 

$(document).ready(function(){   


   $('#image img').mouseover(function(){

       alert('mouseOVER!!!');

   });

})





html    

<button id='showstuff' onclick='listem();'>show</button>
4

5 回答 5

1

尝试使用委托（使用.on方法）。您可以将事件处理委托给父对象：

 $('#image').on('click', 'img', function() {});
于 2012-08-01T23:14:12.990 回答
1

您不能将鼠标悬停应用于尚不存在的元素，因此您的准备功能仅适用于现有的#image。对 ajax 成功执行一个函数来应用侦听器，你应该会很好。

jQuery.ajax({
        type: "GET", 
        url: "http://list.php", 
        data: null, 
        dataType:"json", 
              timeout: 10000,
              global: true,
              error: oh_no,
        success: function(){
           $('#image img').mouseover(function(){
               alert('mouseOVER!!!');
           });
        }
     });
于 2012-08-01T23:14:26.083 回答
1

此外，您正在页面加载时应用侦听器，但此时对象不存在。尝试创建像“AddImageListeners()”这样的函数并在 ajax 调用的“成功”部分调用它。

于 2012-08-01T23:13:28.077 回答
0

而不是将鼠标悬停在选择器上，您需要使用 live、delegate 或 on，具体取决于 jQ 版本。

这意味着还应该将事件触发器添加到动态添加的内容中，例如 ajax 调用。

为此，请使用类似的东西。

$(document).ready(
  $("html").on("mouseover","yourselector", yourOnMouseFunction())
);

祝你好运（如果您只想在某些选择器中使用实时事件，则可以用任何父选择器替换 html）。

于 2012-08-01T23:13:58.393 回答
0

您需要在通过 ajax 创建的元素中注入 jquery。这将通过.live()函数、.on()函数或livequery插件来完成。请参阅.live() api.jquery.com/live和livequery docs.jquery.com/Plugins/livequery的链接

于 2012-08-01T23:16:09.013 回答