Событие jQuery не работает в новом созданном элементе

94
12

Я беру элемент 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>

спросил(а) 2016-08-24T10:12:00+03:00 3 года, 6 месяцев назад
1
Решение
74

Потому что вы потеряли своего слушателя. .follow создаете новый тег img и заменяете его своим документом. Вместо этого вы должны использовать делегирование событий.

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

ответил(а) 2016-08-24T10:15:00+03:00 3 года, 6 месяцев назад
49

Если вы добавляете событие к вновь добавленному элементу, ничего не произойдет. Это происходит из-за связанного непосредственно связанного обработчика событий, который мы ранее применяли. Прямые события привязаны только к элементам во время вызова метода.on(). См. Ниже ссылку, например, и четкое понимание.

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

ответил(а) 2016-08-24T10:22:00+03:00 3 года, 6 месяцев назад
36

Вы можете использовать делегат для таких ситуаций. Он решит вашу проблему привязки события к элементу. Попробуйте ввести код ниже.

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

ответил(а) 2016-08-24T10:22:00+03:00 3 года, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема