2

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("some new HTML, containing #myButton");

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

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

可能的解决方案

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

  2. 在 Optimizely 之后找到一种执行代码的方法，以这种方式添加所有事件侦听器。有没有好的方法来做到这一点？

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

    • 问题：很难预测 A/B 测试和替换的具体内容

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

4

2 回答 2

1

我不确定是否有一种“干净”的方法可以做到这一点，因为附加到旧元素的事件可能不适用于新元素。想象一个表单元素被一个 div 替换：事件应该发生onchange什么onblur？

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

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

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

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

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

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

于 2016-01-18T17:03:50.377 回答
0

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

于 2016-01-18T20:58:15.697 回答