Skip to content

jQuery event doesn’t work at new created element

I take img element with a class “.follow”, then I hide it and replace it with a new created element button with a class .followbutton. After mouseout event I take this new created button element, hide it and replace it with a new created img element with a class .follow. Finally I have new element img with the same attributes which were initially. But now mouseenter doesn’t work, and I don’t figure it out why.

$(".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>

Answer

Because you lost your listener on .follow when creating a new img tag and replace it your document. You have to use a event delegation instead.

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