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.

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.

• javascript
• jquery
• yahoo

Share Improve this question Follow edited Jul 9, 2012 at 15:24 Naftali 146k4141 gold badges247247 silver badges304304 bronze badges asked Jul 9, 2012 at 15:10 Gabriel Ryan NahmiasGabriel Ryan Nahmias 2,15922 gold badges2626 silver badges3939 bronze badges 5

• 1 use the event obj that you passed in the on() – NDBoost Commented Jul 9, 2012 at 15:12
• Post html code. Also do you have href attribute in the a tag u clicked? – kiranvj Commented Jul 9, 2012 at 15:15
• 2 @freakish The code isn't fine. The selector argument is invalid, so it's being ignored. That results in a click event handler that's bound directly to the document - hence the undefined href attribute - rather than delegated to anchors. At no point has "the code runs" been synonymous with "the code is correct". – Anthony Grist Commented Jul 9, 2012 at 15:24
• @AnthonyGrist Yep, you're right. My apologies, I was too fast in my judgement. – freakish Commented Jul 9, 2012 at 15:25
• The reason I was trying to use that not selector for the second argument is because it's kind of a tricky setup. I'm aware that the second argument should be a string but it's actually firing when I click so now I'm trying to just get the clicked element. I'll log the event to the console and get the element or something. – Gabriel Ryan Nahmias Commented Jul 9, 2012 at 16:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

The ON method can also be used without delegation. If no content is added after the page has loaded the following code can be used to select the elements:

var elements = $('#contcont a, #leftnav li a, #leftnav li ul a, #mainarea-home a').not('.secitem-mid a');

And the following to do a bit of event handling:

$(elements).on('click', function() {
    //do something
});