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

时间：2016-01-18 14:27:36

标签： javascript jquery ab-testing 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");

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

    解决这个问题会有什么好的“干净”方式？

    可能的解决方案

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

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

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

      • 问题：很难预测A / B究竟会测试和替换

      4. 修改 我正在使用jQuery 1.11.x

2 个答案:

答案 0 :(得分：1)

我不确定是否有＆＃34;清洁＆＃34;这样做的方法，因为附加到旧元素的事件可能不适用于新元素。想象一下，一个表单元素被div替换：onchange或onblur个事件会发生什么？

优化尝试同时迎合两种不同类型的用户：高级用户和新手。 WYSIWYG无法做出复杂的变化，因此如果您正在编辑代码，那么您应该知道自己在做什么。

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

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

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

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

    当您说您正在使用jQuery 1.11.x时，您的意思是在您的网站上，还是Optimizely包含的内容？如果Optimizely包含哪些内容，是剪裁版本还是完整版本（Optimizely Project Home - ＆gt; Settings - ＆gt; Javascript）？

答案 1 :(得分：0)

你是不是应该能够使用jQuery的onRemove（）来首先为Optimizely的“魔法”背后发生的事件设置监听器，例如： 2200494？

相关问题
最新问题