如何在 replaceWith 之后重新绑定 jQuery 事件处理程序，例如在使用 Optimizely 时答案

【问题标题】：How to rebind jQuery event handlers after replaceWith, e.g when using Optimizely如何在 replaceWith 之后重新绑定 jQuery 事件处理程序，例如在使用 Optimizely 时
【发布时间】：2016-01-18 14:27:36
【问题描述】：

Optimizely A/B 测试服务广泛使用.replaceWith("new HTML") 来生成简单的 A/B 测试。这具有从被替换元素中移除正在侦听事件的任何事件侦听器的副作用，即使新元素具有相同的 ID/类。

例子：

DOM 包含：

<div class="something">
  <button id="myButton"></button>
</div>

收听者： $("#myButton").click(function() { console.log('clicked!'); });
替换为： $(".something").replaceWith("some new HTML, containing #myButton");

在第 3 步之后，点击 #myButton 不再起作用，因为原始 DOM 元素已被销毁并添加了一个新元素。

解决这个问题的好方法是什么？

可能的解决方案

了解您的代码库并在 Optimizely 的实验中“重新添加”适当的事件侦听器。
- 问题：A/B 测试人员可能不是真正的软件开发人员，认为这很麻烦。
- 似乎不是很干净的方式
在 Optimizely 之后找到一种执行代码的方法，以这种方式添加所有事件侦听器。有什么好办法吗？
使用“使用 $.on() 的事件委托”，如下所述：how to replace HTML with jQuery but keep event bindings
- 问题：很难预测 A/B 测试和替换的具体内容

编辑： 我正在使用 jQuery 1.11.x

【问题讨论】：

为什么不直接使用on() 来处理任何可能的 a\b 目标？
我当前的问题 atm 中有一些 .blur() 和 .click() 电话。这些不只是.on('blur',fn) 和.on('click', fn) 的别名吗？
它们不是别名。一个粗略的解释是$('identifier').on() 将侦听任何匹配'identifier' 的元素，而click() 或blur() 将仅将侦听器附加到现有元素。更多信息：stackoverflow.com/questions/9122078/…
.blur() 上的 jQuery API 文档：“此方法是 .on("blur", handler) 的快捷方式" (api.jquery.com/blur)... -.- 这只是糟糕的措辞在文档中还是我看错了地方？
事情可能发生了变化，但我认为这种宣传有点令人困惑。查看api.jquery.com/on 的“委托事件”部分。我认为快捷方式是on(event, handler)，而您可能想要on(event, delegatedElement, handler)。

标签： javascript jquery ab-testing optimizely

【解决方案1】：

我不确定是否有一种“干净”的方式来执行此操作，因为附加到旧元素的事件可能不适用于新元素。想象一个表单元素被 div 替换：onchange 或 onblur 事件会发生什么？

Optimizely 尝试同时满足两种不同类型的用户：高级用户和新手。所见即所得不能做复杂的变化，所以如果你正在编辑代码，那么你应该知道你在做什么。

一般来说，这意味着上面的选项 1。两种合理的方法是：

将旧元素转换为新元素，而不是仅仅替换它
隐藏旧元素，添加新元素，然后将新元素中的事件代理到旧元素

当然，除非主代码库将事件与事件委托绑定，在这种情况下，保持相同的 ID/类就足够了。如果您可以访问原始代码库（在 Optimizely 编辑器中工作的人通常不是这种情况——我为最大的 3rd 方测试机构工作，我们无法对客户的实际代码库进行任何更改），那么您应该无论如何升级到事件委托。

如果您可以访问主站点代码，那么您当然可以创建一个附加到窗口的回调（优化范围内的所有代码），您的 Optimizely 代码在完成时调用它，但同样，事件委托可能是一个更好的选择.

当您说您正在使用 jQuery 1.11.x 时，您是指在您的网站上，还是 Optimizely 包含的内容？如果Optimizely包含的内容是精简版还是完整版（Optimizely项目主页-->设置-->Javascript）？

【讨论】：

我可以访问代码库并在那里使用 jQuery（我已将 Optimizely 设置为不发布 jQuery）。似乎我想更多地研究事件委托，因为这将使我们的 A/B 测试人员更容易。也许这也是一种很好的做法。

【解决方案2】：

您是否应该能够使用 jQuery 的 onRemove() 来首先为将在 Optimizely 的“魔法”背后发生的事件设置侦听器，例如2200494?

【讨论】：