[eluser]Nick Husher[/eluser]
[quote author="At the Gates" date="1227137095"]I think your code isn't working because you're listening for the click on the <img> instead of the <a>. Calling preventDefault(e) inside the img click function will not work unless you put it inside the actual element that is being clicked (in this case the <a> click wins)...[/quote]
The technical term for this behavior is "capturing" and "bubbling." Some events that get fired by elements in a document tree are known to "bubble", while all events go through an event process, which takes place in two phases. The "capture phase" begins at the document level and travels down through the tree to the specific node the event took place on. Each element in the tree may take an action at this phase if it is configured to do so. When it reaches the element in question, the element is given a chance to handle the event, then certain kinds of events "bubble" back up the document tree for an arbitrary number of steps.
Mouse events travel all the way down and all the way back up the three in the W3C model, which potentially gives a link potentially two opportunities to direct the user to another page.
Note that the IE family of browsers operate on a somewhat different model that I'm not as familiar with, so I don't feel comfortable speaking to.
My approach would be somewhat different than the other contributors, with the above knowledge in mind. I would attach an event handler to the element that contains these toggling elements, rather than the elements themselves. This offers two main advantages: it prevents your problem of linking to another page, and it reduces the memory footprint of your script. Normally memory wouldn't be a problem if you're only attaching five or ten event handlers, but if you're attaching fifty or a hundred, you'll notice some performance degradation (esp. in things like javascript-based animation). So, my alternative would look something like this:
Code:
$("#container").click(function(eventObject) {
var target = eventObject.target;
// if we're looking at our toggle image
if($(target).hasClass('dot')) {
eventObject.stopPropagation();
// perform AJAX
}
else { return; }
});
