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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jquery jquery-events