Question

我正在通过javascript重建选择，根据用户输入调整包含的选项元素。

在初始页面加载时，我将所有选择选项存储在“countryOptions”中，并根据用户输入，我将所有包含选择选项的“countryOptions”与新的子集并创建一个新的 select 元素作为“newSelect”，以.replaceWith(newSelect)将其写入DOM。

选择元素有一个on change listener：

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

我不使用.html()，因为在选择元素上使用.html()时，某些IE版本中存在已知问题。将{strong> select 元素替换为.replaceWith()后，.replaceWith()按预期删除所有事件处理程序。

我不使用CSS来“隐藏”选择元素，因为这不适用于跨浏览器。

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

Answer 1

可能有帮助

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

Answer 2

最简单的方法是使用委托事件处理程序，每次更换元素时都可以绑定它们。但是，如果您因任何原因不想或不想这样做，您可以使用

获取所有事件处理程序

$._data( countrySelector, "events" );

但要注意countrySelector需要是html而不是jQuery元素。它返回一个包含所有处理程序的Object，然后您可以将其绑定到新元素。

代表的代码示例：

function countrySelectorChange() {
   // do your magic
}

然后将委托绑定到事件：

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

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

newSelect.on('change', countrySelectorChange);

恢复或保留select之后的事件.replaceWith（）

2 个答案: