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事件不適用於新創建的元素

回答

相關問題