CODEWITHSUNDEEP
javascriptjquery
Rob
Rob

Reputation: 235

.on() event not firing

Not sure why the following code isn't working. If I change the .on() to .live() it works but live events hang around and since this is something will come on and off the page mmore than once, live will keep adding to the event line every time it's clicked. I guess the short and skinny is, why would this not fire?

$("#" + old_n).on('mousedown', function(evt) {
    console.log(old_n);

    if($(el).data('clickphase')) {
        return true;
    }

    $("#" + $.contextmenu).remove();
    $(el).data('served', true);

    if(typeof array_of_a[a_index][1] == 'function') {
        array_of_a[a_index][1](evt, el);
    }

    // console.log(array_of_a[a_index]);            
    // array_of_a[a_index][1](evt, el);
    $(el).removeData('served');
});

old_n is the id of the current <li> that's clicked on, which also has a hover event, but that shouldn't ruin the mousedown event right?

Upvotes: 3

Views: 1817

Answers (3)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

Your code is not a correct translation from live to on. Try this instead:

$(document).on("mousedown", "#" + old_n, function (evt) {
    /*...*/
});

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

on is not a drop in replacement for live. Try monitoring at the list item's ul level instead. This is more efficient and the benefit of on.

$('ul').on('click', 'li', function() {
    //get clicked list item's id
    var id = $('this').prop('id');
});

Because you are monitoring at the ul level you will need to retrieve the information you want from the list item.

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83356

$("#" + old_n).on('mousedown', function(evt) {

Will only work if old_n is present when the page is rendered. This is a directly bound event, identical to

$("#" + old_n).bind('mousedown', function(evt) {

You want a delegated event:

$(document).on("mousedown", "#" + old_n, function(evt) {

This will cause all mousedown events anywhere in the document to be "listened to" by jQuery, and if any come from an element matching your selector—id of old_n—then the event handler will fire.

Of course, listening to every mousedown event anywhere in your document is a bit wasteful. If you know that this element will only ever exist in, say, a div with an id of foo (and foo exists when the page is rendered), then why not just listen to events coming up to foo

$("#foo").on("mousedown", "#" + old_n, function(evt) {

Upvotes: 3

Related Questions