添加任何额外的 JavaScript 都会破坏 jQuery 模式中的功能答案

【问题标题】：Adding any additional JavaScript is breaking functionality within jQuery modal添加任何额外的 JavaScript 都会破坏 jQuery 模式中的功能
【发布时间】：2013-07-12 07:15:43
【问题描述】：

我有一个由其他人创建的页面，其中包含模态窗口，每个模态窗口都有悬停时显示的链接/图像。仅供参考，我对 JavaScript 和 jQuery 的了解非常有限。

我想要实现的是将 Google Analytics 事件标签添加到模式窗口中的链接。它可以与直接添加到锚标记的 onclick（下面的代码）一起使用，或者如果它通过 jQuery/JavaScript 添加到链接中）。该事件需要在 Google Anayltics 中作为点击事件触发。

通常，我只是添加：

onclick="_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);"

直接添加到锚标记，但是每当我将代码添加到 HTML 中的锚标记时，jQuery 就会停止工作。模态窗口在此链接上正常工作： http://cookware.lecreuset.com/cookware/content_cast-iron-guide-sizes_10151_-1_20002

您可以在以下链接上看到我所说的“停止工作”的意思 - 列表标签中的项目不再被填充，这意味着图标不会显示，并且悬停时显示的新内容可以'不可访问：http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002

由于大多数链接都是在 jQuery 中创建的，我开始尝试通过 .click、.attr、.on 和 .bind 添加 Google 标记，但没有成功。上面的链接向您展示了我对 .click 函数的尝试（搜索 CIGuide，您会在第二个链接的源代码中找到它），但无论我在页面中添加什么 JavaScript，它都会以相同的方式中断。我原来的问题在这里：Not able to successfully add Google Analytics Event Tag to link created by .attr

在我无法让这两件事中的任何一个发挥作用后，我决定尝试在页面上在我提供的所有内容之外使用它自己的 JavaScript 标记进行一个简单的警报，看看我是否可以让它发挥作用。它运行良好，但模态功能仍然中断。

我已经能够成功地将 Google 标记添加到顶部导航中的锚点以及页面左侧和右侧的箭头中。但每当我尝试标记其他任何内容时，它都会中断。

与我合作的代理机构能够在他们的服务器上测试它时毫无问题地将谷歌标签添加到锚点，如果我在我的本地机器上测试它，我能够看到事件触发。我必须假设我的服务器或 OpenCMS 有问题。但是，我在任何浏览器/调试器中都看不到任何错误消息，并且我已经使用 JSLint 验证了我的脚本添加，并且一切都检查出来了。

这快把我逼疯了！谁能帮我弄清楚为什么这不起作用以及如何向页面添加事件标签？

【问题讨论】：

所以如果我设法调用alert 并且悬停功能仍然有效，您会很高兴吧？
如果您能够做到这一点将帮助我回答为什么在页面上添加任何内容时它会中断，那么是的，先生。
我还尝试将 _gaq.push 调用更改为 console.log 以查看它是否仍会中断，并且确实如此。

标签： javascript jquery google-analytics

【解决方案1】：

不完全确定您要达到的目标，以及它是否可行。

$(document).ready(function() {

    $("#modal_sizes_1 a").each(function( index, elem ) {

        $(elem).click(function() {

            _gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);
        });
    });
});

更新
好的，所以我认为是关于这一行：

<a
    href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
    title="About Cast Iron" 
    onclick="_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);"

>About Cast Iron</a>

我会尝试像这样改变它

<a
    href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
    title="About Cast Iron" 
    onclick="setTimeout(function(){
        _gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);
    },0);"

>About Cast Iron</a>

或者甚至使延迟比0 更长，比如 10 或 50。

【讨论】：

我正在尝试将 _gaq 推送调用添加到链接，但无论何时我将任何其他脚本添加到页面，模式窗口中的内容都会停止工作，无论我是否在现有函数中添加它或在他们自己的脚本标签中。我将更新我的问题以澄清我想要实现的目标。
好的。我找不到您建议搜索的“CIGuide”。
您查看第二个网址了吗？它应该在那里：cookware.lecreuset.com/cookware/…
我的错，这条线太长了，它可能在最后的某个地方。缺少格式，预期的 JS 不是 html 哈哈。
我知道，在我粘贴到 CMS 和处理它之间的某个时间点，格式会中断……很抱歉。感谢您的观看。

【解决方案2】：

您可以使用 GA 推送方法的回调并添加超时。在你的情况下尝试这样的事情：

var submitBtn = $('.submit-btn');

submitBtn.on('click', function(e) {
    var that = this;

    if (typeof _gaq != 'undefined') {
        e.preventDefault();

        _gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3'], function() {
            setTimeout(function() {
                window.location = $(that).attr('href');
            }, 100);
        });
    }
});

【讨论】：