Как переупорядочить обработчики событий jQuery после заменыWith, например, при использовании Optimizely

Question

Служба тестирования Optimizeely A/B широко использует .replaceWith("new HTML") для легкого тестирования A/B. Это имеет побочный эффект удаления любых прослушивателей событий, которые прослушивали события из замещенных элементов, даже если новые элементы будут иметь одинаковые идентификаторы/классы.

Пример:

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. использования, как описано здесь: how to replace HTML with jQuery but keep event bindings

   • проблема: трудно предсказать, что именно будет A/B тестирование и заменить

Edit: Я использую JQuery 1.11.x

Answer 1

Я не убедитесь, что существует «чистый» способ сделать это, поскольку события, связанные со старым элементом, могут быть неприменимы к новому. Представьте, что элемент формы заменяется div: что должно произойти с onchange или onblur событиями?

Оптимизируется для одновременного использования двух разных типов пользователей: опытных пользователей и новичков. WYSIWYG не может выполнять сложные варианты, поэтому, если вы редактируете код, тогда ожидается, что вы знаете, что делаете.

Вообще говоря, это означает вариант 1 выше.Два разумных способов сделать это будет:

1. Transform старый элемент в новую, а не просто заменить его
2. Скрыть старый элемент, добавить новый, то прокси события из нового элемента в старый

Если, конечно, главная кодовая не связывающие события с делегацией событий, и в этом случае сохраняя те же идентификаторы/классы должны быть достаточно. Если у вас есть доступ к исходной кодовой базе (это часто бывает не для людей, работающих в редакторе Optimizely, я работаю в крупнейшем стороннем агентстве тестирования, и мы не можем вносить какие-либо изменения в фактическую кодовую базу клиента), тогда вы должны переход на делегирование событий в любом случае.

Если у вас есть доступ к основному коду сайта, вы, безусловно, можете создать обратный вызов, прикрепленный к окну (оптимизируется весь код), который ваш код Optimizely вызывает, когда он будет завершен, но, опять же, делегирование событий, скорее всего, будет лучше вариант.

Когда вы говорите, что используете jQuery 1.11.x, вы имеете в виду на своем сайте или то, что включено Optimizely? Если то, что включено Optimizely, это урезанная версия или полная версия (Оптимизированный проект Главная -> Настройки -> Javascript)?

Answer 2

Нельзя использовать функцию onRemove() для jQuery для первой настройки прослушивания событий, которые произойдут из-за «волшебства» Optimizely. 2200494?