Putting 'document' vs 'the selector itself' in jQuery?

Question

Guys I have 2 questions which is i think related in some ways I guess. First:

What is the difference between these two:

$(document).on('click','#someselector', function() {

  //do something

});

vs this

$('#selector')on('click', function(){
  /do something
});

Sometimes both works, sometimes it doesn't.

Number 2 question:

I created a jQuery UI dialog like this:

function this_dialog(id) {

    $("#div-id-for-the-dialog").dialog({
        autoOpen            : false,
        modal               : true,
        draggable           : false,
        width               : 400, 
        buttons         : [{ 
            id      : id,
            text    : 'Ok' 
        },{  
            text    : 'Cancel',
            click   : function () { 
                $("#div-id-for-the-dialog").dialog('close');
            }
        }]   
    });  

}

So as you can see, the id is passed to the function, many will call this dialog and pass a unique id to it. The id will then be assigned only to the Ok button.

So when i call this function to load a unique dialog:

add_section_complete_reopen_dialog('my-unique-dialog-id'); //passing the id
$('#div-id-for-the-dialog').html("I have a unique dialog now? ok?");

When i press ok with this code:

$(document).on('click','#my-unique-dialog-id', function () {
  //Do some ajax call here
});

I get this JS error: TypeError: s is undefined But the ajax is successful. I just want to know what that error is.

So when I say it is related to the first question is because when i replace the click code with this:

$('#my-unique-dialog-id').on('click', function () {
  //Do some ajax call here
});

It doesn't work anymore.

Thanks

The first is basically testing the e.target to see if it has the id which is good for dynamically created elements. The other shouldnt work all the time for dynamic elements. The rest im on my phone so not looking through it. But hope that helped your first question. — EasyBB, Jun 19 '14 at 03:47
I don't see how we can explain the `s is undefined` error, since there's no use of `s` in the code you posted. — Barmar, Jun 19 '14 at 03:51

score 7 · Accepted Answer · edited May 23 '17 at 12:21

7

$(document).on('click', 'someselector', function() ...);

is delegation syntax. It allows you to bind a handler to elements that may not exist at the time that you execute the code. See:

Event binding on dynamically created elements?

$('someselector').on('click', function() ...);

only binds the handler to the element(s) matching the selector at the time you execute this code.

edited May 23 '17 at 12:21

Community

1
1

answered Jun 19 '14 at 03:49

Barmar

741,623
53
500
612

score 0 · Answer 2 · answered Jun 19 '14 at 04:15

I marked the first answer correct because I know I did not put enough info on how to debug the second question, but In case someone might encounter the same error i had, I found out why. So when you initialize your jQuery UI dialog like this:

function this_dialog(id) {

    $("#div-id-for-the-dialog").dialog({
        autoOpen            : false,
        modal               : true,
        draggable           : false,
        width               : 400, 
        buttons         : [{ 
            id      : id,
            text    : 'Ok' 
        },{  
            text    : 'Cancel',
            click   : function () { 
                $("#div-id-for-the-dialog").dialog('close');
            }
        }]   
    });  

}

Make sure to include the click event of the buttons like this:

function this_dialog(id) {

$("#div-id-for-the-dialog").dialog({
    autoOpen            : false,
    modal               : true,
    draggable           : false,
    width               : 400, 
    buttons         : [{ 
        id      : id,
        text    : 'Ok',
        click   : function () {
           //include the click event, even if you have nothing to put here.
        }
    },{  
        text    : 'Cancel',
        click   : function () { 
            $("#div-id-for-the-dialog").dialog('close');
        }
    }]   
});

}

Putting 'document' vs 'the selector itself' in jQuery?

2 Answers2