通过 Google Optimize 用 JQuery 替换 <a> 标签的最佳方法

问题描述

试图在不使用 Jquery 的 .replaceWith() 的情况下替换元素，它会删除单击偶数绑定。这似乎有效，但是当在浏览器中查看 dom 元素时，它看起来有所不同，并且代码刻度线已更改。这会导致数据无法提交。这是优化问题还是浏览器问题？有什么更好的方法来处理这个问题？

原始代码：

$('css-PATH-TO-ELEMENT > ul > li').html("<a href='/PATH-TO-PAGE' class='active-trail link--internal' onclick='Drupal.behaviors.Analytics.navClick('Header','Compare Our Courses')' title='Compare Our Courses'>Compare Our Courses</a>");

呈现的代码（Chrome） 注意 navClick() 内部的区别

<a href="/PATH-TO-PAGE" class="active-trail link--internal" onclick="Drupal.behaviors.Analytics.navClick(" header','compare our courses')' title="Compare Our Courses">Compare Our Courses</a>");

渲染代码 (Firefox) 注意 navClick() 内部的差异

<a href="/PATH-TO-PAGE" class="active-trail link--internal" onclick="Drupal.behaviors.Analytics.navClick(" header','compare="" our="" courses')'="" title="Compare Our Courses">Compare Our Courses</a>

解决方法

您不能在 onclick 和参数中使用相同的引号

你可以试试这个：

$('CSS-PATH-TO-ELEMENT > ul > li').html("<a href='/PATH-TO-PAGE' class='active-trail link--internal' onclick=\"Drupal.behaviors.Analytics.navClick('Header','Compare Our Courses')\" title='Compare Our Courses'>Compare Our Courses</a>");