在 .replaceWith() 之后恢复或保留 select 的事件

Question

我正在通过 javascript 重建 select 以根据用户输入调整包含的 option 元素.

在初始页面加载时，我将所有 select 选项 存储在 "countryOptions" 中，并根据用户输入匹配所有包含的 select options of my "countryOptions" with the new subset and create a new select element as "newSelect" to write它进入 DOM 与 .replaceWith(newSelect).

select 元素有一个更改侦听器：

$(countrySelector).on('change', function(){...});

我不使用 .html()，因为在 select 元素上使用 .html() 时，某些 IE 版本中存在已知问题。将 select 元素替换为 .replaceWith() 后，所有事件处理程序都会按 .replaceWith().

的预期删除

我不使用 CSS 到 "hide" select 选项 元素，因为这不能跨浏览器工作。

现在我正在寻找一种可以跨浏览器工作的替代方法或 keep/restore 我的事件处理程序的方法。有什么想法吗？

Answer 1

最简单的方法是使用每次替换元素时都可以绑定的委托事件处理程序。但是，如果您出于某种原因不想或不能这样做，您可以使用

获取所有事件处理程序

$._data( countrySelector, "events" );

但请注意，countrySelector 必须是 html 而不是 jQuery 元素。它 returns 一个包含所有处理程序的对象，然后您可以将其绑定到新元素。

代表的代码示例：

function countrySelectorChange() {
   // do your magic
}

然后将委托绑定到事件：

$(countrySelector).on('change', countrySelectorChange);

为您需要的每个添加项目重复此操作。

newSelect.on('change', countrySelectorChange);

Answer 2

可能会有帮助

$(document).on('change', countrySelector , function(){...});

在 .replaceWith() 之后恢复或保留 select 的事件

restore or keep events of select after .replaceWith()

javascript

jquery

dom

event-listener

replacewith