Question

我有这个文件：

<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>");
}

问题是，mouseover和mouseout函数仅适用于我在html上添加的，而不适用于 i通过jquery。

我能做什么，所以jquery附加也可以调用mouseover和mouseout？

Answer 1

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

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

这会向主体添加一个事件处理程序，但在实际调用该函数之前，它将首先按第二个参数进行过滤。这样，所有标记（当前和未来）都将使事件处理程序正常工作。

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

Answer 2

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

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

});

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

添加到html所以以前定义的函数将起作用

2 个答案: