jQuery事件不适用于新创建的元素

我带一个类“.follow”的img元素，然后隐藏它并用类“.followbutton”替换为一个新创建的元素按钮。在发生“mouseout”事件后，我将这个新创建的按钮元素隐藏起来，并将其替换为一个新的带有“.follow”类的img元素。最后，我有了与最初相同的属性的新元素img。但现在“mouseenter”不起作用。我不明白为什么。创建一个新的img标签和更换您的稿件时.followjQuery事件不适用于新创建的元素

$(".follow") 
 
    .on("mouseenter", function() { 
 
     $(this).fadeOut(150, function() { 
 
      var init = this; 
 
      var btn = document.createElement("BUTTON"); 
 
      var t = document.createTextNode("Follow"); 
 
      btn.appendChild(t); 
 
      btn.className = "followbutton"; 
 
      $(btn).hide(); 
 
      $(this).replaceWith(btn); 
 
      $(".followbutton").show(150); 
 
      $(".followbutton").on("mouseout", function() { 
 
       var imgback = $("<img />", { 
 
        class: "follow", 
 
        src: "img/remove.png", 
 
       }).hide(); 
 
       $(this).hide(150); 
 
       $(this).replaceWith(imgback); 
 
       $(".follow").show(150); 
 
      }); 
 
     }); 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
\t <title>Follow</title> 
 
</head> 
 
<body> 
 
    
 
    <img src="img/remove.png" class="follow"> 
 
    
 
</body> 
 
</html>

来源

2016-08-24 goodgrief

因为你失去了你的听众。您必须改用事件委派。

$(document).on("mouseenter", ".follow", function() { /* ... */ });

$(document).on("mouseenter", ".follow", function() { 
 
     $(this).fadeOut(150, function() { 
 
      var init = this; 
 
      var btn = document.createElement("BUTTON"); 
 
      var t = document.createTextNode("Follow"); 
 
      btn.appendChild(t); 
 
      btn.className = "followbutton"; 
 
      $(btn).hide(); 
 
      $(this).replaceWith(btn); 
 
      $(".followbutton").show(150); 
 
      $(".followbutton").on("mouseout", function() { 
 
       var imgback = $("<img />", { 
 
        class: "follow", 
 
        src: "img/remove.png", 
 
       }).hide(); 
 
       $(this).hide(150); 
 
       $(this).replaceWith(imgback); 
 
       $(".follow").show(150); 
 
      }); 
 
     }); 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
\t <title>Follow</title> 
 
</head> 
 
<body> 
 
    
 
    <img src="img/remove.png" class="follow"> 
 
    
 
</body> 
 
</html>

来源

2016-08-24 07:15:36 eisbehr

它的工作原理！谢谢！ – goodgrief

不客气，@真好！ – eisbehr

您可以使用委托此类情况。它将解决您对元素附加事件的问题。尝试下面的代码。

$(document).delegate(".follow","mouseenter", function() { 
    //YOUR CODE 
});

来源

2016-08-24 07:22:34 Kashyap

从jQuery 1.7开始，'.delegate（）'已被'.on（）'方法取代。所以你真的不应该再使用'委托'了。 – eisbehr

如果您将事件附加到新添加的项目，则不会发生任何事情。这是因为我们之前附加了直接绑定的事件处理程序。直接事件仅在调用.on（）方法时附加到元素上。例如，请参阅下面的链接并清楚理解。

https://learn.jquery.com/events/event-delegation/

来源

2016-08-24 07:22:56 Dhruv

jQuery事件不适用于新创建的元素

回答

相关问题