jQuery解除绑定事件的变量对象

问题描述

例如，我有以下代码：

const $popup = $('#popup');
const $form = $(`<div>
                    <input type="text" value="Joe">
                    <button>save</button> 
                  </div>`);

$form.find('button').on('click',function() {
  $popup.empty();
});

$('#edit').on('click',function() {
  $popup.html($form);
});

// for simplicity
// $popup.html($form).empty().html($form); // events don't work

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="edit">Edit</button>
<br><br>

<div id="popup"></div>

问题在于，尽管对象本身仍存储在变量中，但调用html()（以及remove()和其他变量）后，jquery会删除事件。因此，在第二个通话之后，您无法按“保存”。

如何强制jquery不删除事件？

我考虑了clone()的选项，但是后来我无法在输入中保存文本。

我考虑了detach()的选项，但实际上我无法控制弹出窗口的功能。我只有show(html)和hide()方法。

我考虑了$(document).on('click','some',function()的选项，到目前为止，这是唯一可行的选项，但不是最方便的

解决方法

您还应该使用.detatch而不是.empty，以便在删除表单元素时保留表单元素，因为.empty does：

为避免内存泄漏，jQuery在删除元素本身之前先从子元素中删除其他构造，例如数据和事件处理程序。

const $popup = $('#popup');
const $form = $(`<div>
                    <input type="text" value="Joe">
                    <button>save</button> 
                  </div>`);

$form.find('button').on('click',function() {
  $form.detach();
});

$('#edit').on('click',function() {
  $popup.html($form);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="edit">Edit</button>
<br><br>

<div id="popup"></div>