0

我有这个文件：

<html>
   <body>
     <div id="preview">
      <p>test</p>
     </div>
   </body>
</html>

我有这个代码：

$("p").mouseover(function(){
    $("p").css("background-color","yellow");
});
$("p").mouseout(function(){
    $("p").css("background-color","lightgray");
});

function add(){ 
    $("#preview").append("<p id="test">test2</p>");
}

问题是，mouseoverandmouseout函数仅适用于<p>我在 html 上添加的，而不适用于<p>通过 jquery 附加的 i。

我该怎么做才能使附加的jquery<p>也能够调用mouseover和mouseout？

4

2 回答 2

3

您应该使用.on()添加处理程序。像这样的东西

$('body').on('mouseover', 'p', function() { ...

这将向主体添加一个事件处理程序，但在实际调用函数之前将首先通过第二个参数进行过滤。这样，所有<p>标签，当前和未来，都会让事件处理程序正常工作。

如需完整文档，请阅读 API 文档：http ://api.jquery.com/on/

于 2013-07-24T19:04:05.773 回答
1

您需要通过 jQuery 的.on()函数使用事件委托，即使有动态内容，它也会将事件应用于选择器，如下所示：

$('body').on('mouseover', 'p', function() {

});

注意：这指示 jQuery 在 HTML 的（现在或将来）中查找任何<p>标记，<body>当它们生成mouseover事件时，function()回调中的内容将被执行。

于 2013-07-24T19:06:09.160 回答