在内存对象上使用jQuery on（）

Question

I am in the process of writing a jQuery plugin for handling Google analytics tracking using html5 data attributes.

The code is very much still in alpha stage but the attached fiddle shows that it does track the individual dom elements and pushes the right results. (You'll see all that in the console).

My only real worry so far is that of memory usage. At present I am binding individual event handlers to each element and as we all know that can get messy and memory intensive.

Ideally I'd like to store each tracker object in a central location and perform some sort of look-up inside the jQuery on() function to fire the pushToGoogle() with the correct context.

Unfortunately my JavaScript chops can't quite nail it and I can't figure out an effective way to wrap everything in a neat generic fashion.

Any ideas??

Answer 1

You can use event bubbling.

$(document).on('click', 'a.trackEvent', function () { /* do complicated things */ });

So basicly any a.trackEvent element in document (so all your links with class trackEvent) will execute the function when clicked.

The advantage is only one function exists in memory and if you dynamicly create new dom elements they will also be tracked. You just need some addition code to identify the element.

This used to be the live function: http://api.jquery.com/live/

Answer 2

Turns out that the process was actually quite simple and just required some refactoring.

I have added my code plugin to github here so that anyone following the question can learn from my example code.