添加任何額外的JavaScript正在打破jQuery模式內的功能

我有一個由別人創建的頁面，其中包含模態窗口，每個模態窗口都有懸停時顯示的鏈接/圖像。僅供參考，我對JavaScript和jQuery的理解非常有限。添加任何額外的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

您可以看到我的意思是「停止工作」在以下鏈接 - 列表標記中的項目不再被填充，這意味着圖標不會被填充， t顯示並且無法訪問懸停時顯示的新內容：http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002

由於大多數鏈接都是在jQuery中創建的，因此我嘗試通過.click，.attr，...添加Google Tag。並沒有運氣。上面的鏈接顯示了我對.click函數的嘗試（搜索CIGuide，您可以在第二個鏈接的源代碼中找到它），但是無論我將哪個JavaScript添加到頁面，它都以相同的方式打破。我的原始問題在這裏：Not able to successfully add Google Analytics Event Tag to link created by .attr

在我無法讓這兩件事情都起作用之後，我決定嘗試在我提供的所有內容之外的頁面上嘗試一個簡單的警報，使用它自己的JavaScript標籤，只是爲了看看我能否得到這個工作。它工作完美，但模式功能仍然打破。

我已經能夠成功地將Google標記添加到頂部導航中的錨點以及頁面左側和右側的箭頭。但是，無論何時，我都會嘗試標記其他任何內容，這會中斷。

我正在使用的代理機構能夠將Google標記添加到錨點，而不會在他們的服務器上進行測試時出現問題，並且如果我在本地計算機上測試它，則能夠看到事件觸發。我必須假設我的服務器或OpenCMS存在問題。但是，我沒有在任何瀏覽器/調試器中看到任何錯誤消息，並且我已經使用JSLint驗證了我的腳本添加，並且所有內容都會檢出。

這讓我瘋狂！任何人都可以幫助我找出爲什麼這不起作用，以及如何添加事件標籤到頁面？

來源

2012-12-19 surfbird0713

所以如果我設法調用'alert'並且懸停功能仍然有效，你會很高興吧？ – EricG

如果你能夠做到這一點，將有助於我回答爲什麼在網頁中添加任何內容時中斷它，那麼是的，先生。 – surfbird0713

我也嘗試將_gaq.push調用更改爲console.log，以查看它是否仍然會中斷，並且確實如此。 – surfbird0713

不完全確定你想要達到的目標，以及它是否可行。

$(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。

來源

2012-12-19 21:26:55 EricG

我正在嘗試將_gaq推送調用添加到鏈接，但是無論何時添加任何其他腳本到頁面，模式窗口中的內容都會停止工作，無論是將其添加到現有功能還是在其自己的腳本標記中。我會更新我的問題，澄清我想達到的目標。 – surfbird0713

好的。我無法找到您建議搜索的「CIGuide」。 – EricG

你看第2個網址嗎？它應該在那裏：http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002 – surfbird0713

您可以對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); 
     }); 
    } 
});

來源

2013-07-11 23:15:43 Ben

添加任何額外的JavaScript正在打破jQuery模式內的功能

回答

相關問題