CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
goodgrief
goodgrief

Reputation: 408

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>

Upvotes: 0

Views: 1473

Answers (3)

Dhruv
Dhruv

Reputation: 173

If you are attaching event to newly added item, nothing would happen. This is because of the directly bound event handler that we attached previously. Direct events are only attached to elements at the time the .on() method is called. Please refer below link for example and clear understanding.

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

Upvotes: 1

Kashyap
Kashyap

Reputation: 391

You can use delegate for such situations. It will solve your problem of event attachment to the element. Try below code.

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

Upvotes: 0

eisbehr
eisbehr

Reputation: 12452

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>

Upvotes: 3

Related Questions