#jquery
#jquery
Вопрос:
Я просмотрел документацию jQuery для ответа на этот простой вопрос:
replaceWith()
Вызываетremove()
илиdetach()
под капотом?
Мне не повезло с официальной документацией; это двусмысленно определяется как удаление узла. Но тесты показывают утечку памяти.
Ответ №1:
Глядя на исходный код jQuery (2.1.1), вы задаете два разных вопроса.
-
replaceWith()
Удаляет ли jQuery обработчики событий?Да. jQuery вызывает
cleanData()
внутренний метод, который удаляет все данные в элементе. Поскольку обработчики событий jQuery хранятся в данных элементов, они также будут очищены.cleanData()
также удаляет обработчик событий, прикрепленный к элементу, который запускает выполнение всех обработчиков событий, хранящихся в данных элементов, путем вызоваjQuery.removeEvent()
(другого внутреннего метода). -
replaceWith()
Вызываетremove()
илиdetach()
под капотом?Единственный раз, когда он вызывается
remove()
, — это если дляreplaceWith()
не было предоставлено аргументов; jQuery обрабатывает это так, как если бы вы вызывалиremove()
вместоreplaceWith()
;
TL;DR: jQuery все очистит для вас, поэтому не должно быть риска утечек памяти.
Ответ №2:
FYW если вы не хотите такого поведения, взгляните на этот плохо обсуждаемый поток по билетам jQueryhttp://bugs.jquery.com/ticket/13400
и для тех, кто не готов ожидать код, вот реализация, replaceWith
которая использует detach
вместо remove
с помощью remove()
old.replaceWith( new );
с помощью detach()
old.before( new ).detach();
Ответ №3:
1) с помощьюA.replaceWith(B); это удалит элемент A и все прикрепленные события. Все события для B должны быть объявлены
2) с помощьюA.перед(B ).detach(); это удалит элемент A, но сохранит событие на потом (и снова будет применяться только к A). Все события для B должны быть объявлены
Эта проблема может быть решена с помощью распространения событий или пузырьковой обработки событий, как в приведенном ниже коде
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".rp").click(function(){
let variable1 = parseInt($(this).text(), 10) 6;
$(this).replaceWith("<button class='rp'>" variable1 "</button>");
});
$(".detach").click(function(){
let variable1 = parseInt($(this).text(), 10) 6;
$(this).replaceWith("<button class='detach'>" variable1 "</button>");
});
$("body").on("click", ".detach2",function(){
let variable1 = parseInt($(this).text(), 10) 6;
$(this).replaceWith("<button class='detach2'>" variable1 "</button>");
});
$("body").on("click", ".detach3",function(){
let variable1 = parseInt($(this).text(), 10) 6;
$(this).before("<button class='detach3'>" variable1 "</button>"). detach();
});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>with ReplaceWith <button class="rp">1</button></p>
<p>with before / detach <button class="detach">2</button> </p>
<p>with ReplaceWith correct event bubbling <button class="detach2">3</button> </p>
<p>with before / detach and correct event bubbling <button class="detach3">4</button> </p>
</body>
</html>
Надеюсь, что это может кому-то помочь…