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>Advertisement
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>