Question

If I’m using jQuery’s .on() function like this (there’s more to it but this is the main problem area extracted):

$(document).on("click", 
          $("#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a").not(".secitem-mid a"),
    function clicker(event, sData) {

    var $this = $(this);

    sHREF = $this.attr("href");

    alert(sHREF);

} );

I’m getting undefined so what would be the best way to actually get the element that’s being clicked? I need .on() so that it always occurs, obviously, instead of having to attach it to all the elements every time new data is loaded (this is through Yahoo! stores so it’s a necessity to do it this way). Thanks.

Answer 1

The second argument to on is a selector, not a jQuery object; it’s used for event delegation.

If you meant to hook those up directly, then:

$("#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a").not(".secitem-mid a").on("click", function clicker(event, sData) {

    var $this = $(this);

    sHREF = $this.attr("href");

    alert(sHREF);

});

If you really wanted to use event delegation, the .not part makes it a bit tricky because (depending on your markup) you might have to repeat it on each of the selectors in your main series. Since that’s ugly, you might be better off handling that particular case afterward in the handler function:

$(document).on("click", "#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a", function clicker(event, sData) {

    var $this = $(this);

    // Handle the "not" part
    if (!$this.is(".secitem-mid a")) {
        sHREF = $this.attr("href");

        alert(sHREF);
    }
});

Separately, though: It’s usually best to root your delegation in the container nearest the elements you want to handle. If your #contcont, #leftnav, and #mainarea-home elements aren’t dynamic, I’d probably look at rooting the delegation in them rather than document, e.g.:

$("#contcont"     ).on("click", "a:not(.secitem-mid a)", clicker);
$("#leftnav"      ).on("click", "li a:not(.secitem-mid a)", clicker);
$("#mainarea-home").on("click", "a:not(.secitem-mid a)", clicker);
function clicker(event, sData) { ... }

Note I only needed three, not four; your #leftnav li ul a selector is already covered by #leftnav li a.

---

And just a bit off-topic: Beware that you’re using a named function expression, which can be tricky on IE8 and earlier. My final example above does away with that, making it a function declaration instead.