JQuery 取消绑定变量中对象的事件

Question

例如我有以下代码：

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() 的选项，目前这是唯一可行的选项，但不是最方便的

Answer 1

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

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

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>

JQuery 取消绑定变量中对象的事件

JQuery unbind events for objects in variables

jquery

jquery-events