javascript - 如何在 replaceWith 之后重新绑定(bind) jQuery 事件处理程序，例如在使用 Optimizely 时

Question

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

例子:

1. DOM 包含:

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

2. 聆听者:$("#myButton").click(function() { console.log('clicked!'); });

3. 替换为:$(".something").replaceWith("一些新的 HTML，包含 #myButton");

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

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

可能的解决方案

1. 了解您的代码库并在 Optimizely 的实验中“重新添加”适当的事件监听器。
   • 问题:A/B 测试人员可能不是真正的软件开发人员，认为这很麻烦。
   • 看起来不是很干净的方式

2. 找到一种在 Optimizely 之后执行代码的方法，以这种方式添加所有事件监听器。有什么好的方法吗？

3. 使用“使用 $.on() 的事件委托(delegate)”，如下所述:how to replace HTML with jQuery but keep event bindings

   • 问题:很难预测 A/B 测试和替换的确切内容

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

Answer 1

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

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

一般来说，就是上面的选项1。两种合理的方法是:

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

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

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

当您说您使用的是 jQuery 1.11.x 时，您是指在您的网站上使用，还是指 Optimizely 包含的内容？如果 Optimizely 包含什么，是精简版还是完整版(Optimizely Project Home-->Settings-->Javascript)？