jQuery ATTR funk in IE

Question

I am dynamically creating javascript and attaching it to the onclick event of links on my page using $(document).ready()

My onclick javascript is used to generate event functions that I am passing to Google Analytics to track events on my page, such as clicks on banners and downloaded PDFs. I am getting stats in Google Analytics for these events from every browser except for IE. So, something is wrong with my code in IE (I have searched and searched for errors on my page, there are none).

Normally I would just do something like $("a").click ... do stuff ... but for whatever reason, the only way I could get the Google Analytics event tracking to work was by putting the tracking event function directly on my links. So I'm using the following code to inject the tracking event function into my link's onclick once the page loads....

// Tracks favorites on the home page.
    $("._gatHomePageFavorites").each
    (
        function(index)
        {
            var description = "Content ID: " + getParameterNamedID($(this).attr("href")) + " - " + $(this).children().first().attr("alt");
            $(this).attr("onclick","alert('1');_gaq.push(['_trackEvent', 'Favorites - Home Page', 'Icon Click','" + _gatCleanString(description) + "']);alert('2');");
        }
    );

I think my problem is that IE is not putting my code on the onclick. But I don't know of a good way to view the generated source in IE. I have tried a couple of javascript functions in the address bar to bring up the generated source, assuming they work, then my code is not injecting the tracking event function into my link's onclick for IE. I see the tracking event function in the onclick in Firefox's view generated source.

As another test, you can see I added alerts around my tracking event funciton. In FF both alerts trigger, In IE neither alert triggers.

One more piece of info. My Google Analytics is not recording events for any IE browser. As far as I can tell, my issue is not specific to one version of IE.

How can I tell if my dynamic javascript is getting into the onclick for IE, and then what can I do to get it into the onclick for IE?

UPDATE To simplify the problem and to focus the direction of the answers, I removed the Google Analytics event function. Now, all I am doing is injecting alert() into the onlick. IE won't even trigger the alert(). I have tried the following...

// Tracks favorites on the home page.
    $("._gatHomePageFavorites").each
    (
        function(index)
        {
            $(this).attr("onclick","alert('1')");
        }
    );

and

// Tracks favorites on the home page.
    $("._gatHomePageFavorites").each
    (
        function(index)
        {
                $(this).attr("onclick","setTimeout(\"alert('1')\", 1000);return false");
        }
    );

So I'm still leaning towards my javascript is not being injected into the onclick in IE.

What is the most reliable way to view generated source in IE?

If I can confirm that my code is not being injected into the onclick attribute of the link, then I can at least have an answer as to why Google Analytics isn't tracking events for IE. It would be because my injected code does not exist in IE.

Answer 1

You should not be adding the 'onclick' attr, but rather using this using jQuery .click() event.

function(index){
    var description = "Content ID: " + getParameterNamedID($(this).attr("href")) + " - " + $(this).children().first().attr("alt");
    $(this).click(function() {
        alert('1');
        _gaq.push(['_trackEvent', 'Favorites - Home Page', 'Icon Click',  _gatCleanString(description)]);
        alert('2');
    });
}

something like above, sorry wrote this quick, so might have a typo.

Answer 2

很小的机会，但是如果你的页面上有任何VBScript，那么你应该在你的onclick字符串前加上“javascript：”

Answer 3

You could just use the time-honoured DOM0 onclick property, though there's really no decent reason why jQuery's click() method wouldn't work.

$("._gatHomePageFavorites").each
    (
        function(index)
        {
            var $this = $(this);
            var description = "Content ID: "
                + getParameterNamedID($this.attr("href")) + " - "
                + $this.children().first().attr("alt");

            this.onclick = function() {
                alert('1');
                _gaq.push(['_trackEvent', 'Favorites - Home Page', 'Icon Click',
                    _gatCleanString(description)]);
                alert('2');
            };
        }
    );

jQuery's attr() method is generally not useful, but that's a whole different rant.

Answer 4

Something to be aware of tracking links is that if the browser leaves the page before the tracking pixel is fetched, the event may not be recorded, depending on the browser, computer, & network speed. I've had good luck with the following (modified from @Tim Down's code):

$("._gatHomePageFavorites").each
    (
        function(index)
        {
            var $this = $(this);
            var description = "Content ID: "
                + getParameterNamedID($this.attr("href")) + " - "
                + $this.children().first().attr("alt");
            $this.click(function(e) {
                alert('1');
                _gaq.push(['_trackEvent', 'Favorites - Home Page', 'Icon Click',
                    _gatCleanString(description)]);
                if ($this.attr('target') != '_blank') {
                    e.preventDefault();
                    setTimeout('document.location = "' + $this.attr('href') + '"', 150);
                }
            });
        }
    );

Essentially, if the link isn't opening in a new window, wait and follow it ourselves.

Answer 5

It turns out that my problem had nothing to do with Google Analytics or it's tracking event. After a lot of testing, I finally determined that in IE, jQuery's $().attr() was not working.

The odd thing was that it didn't break or throw an error. IE just ignored it somehow and would not add my dynamic javascript to the onclick parameter of the anchor tag.

Solutions...

1. The obvious one is to bind to the event like everyone suggested. If you can use $().click() then I agree, use it, always. Never use $().attr("onclick","do something");

2. However other circumstances in my project prevented me from using $().click(). I was unable to get stats into Google Analytics using it's event tracking function unless the event tracking function was inline on the anchor tag.

Went old school...

$(".obj").each
        (
            function (index) {

                this.setAttribute("onclick", "alert('It is Working');");

            }
        );

Thanks for everyone's help.