jQuery事件在新创建的元素上不起作用

时间:2016-08-24 07:12:17

标签: javascript jquery html javascript-events

我将img元素与类“.follow”一起使用,然后我隐藏它并用一个带有“.followbutton”类的新创建的元素按钮替换它。在“mouseout”事件之后,我使用这个新创建的按钮元素,隐藏它并用一个新创建的img元素替换它,类为“.follow”。最后,我有了新的元素img,它们具有最初的相同属性。但现在“mouseenter”不起作用。我不明白为什么。

$(".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>
	<title>Follow</title>
</head>
<body>
  
  <img src="img/remove.png" class="follow">
  
</body>
</html>

3 个答案:

答案 0 :(得分:3)

因为您在创建新的.follow代码时错过了img的监听器并将其替换为您的文档。您必须改为使用事件委派。

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

&#13;
&#13;
$(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);
            });
        });
    });
&#13;
<!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>
	<title>Follow</title>
</head>
<body>
  
  <img src="img/remove.png" class="follow">
  
</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

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