Passing a jQuery object in event delegation

Question

// Snippet 1
$(document).on("keyup blur", "#selector_1_id", function() {
    // DO SOMETHING
});

$(document).on("keyup blur", "#selector_2_id", function() {
    // DO SOMETHING
});


// Snippet 2
var selector_1_id = $("input[name=selector_1_id]");
var selector_2_id = $("input[name=selector_2_id]");

$(document).on("keyup blur", selector_1_id, function() {
    // DO SOMETHING
});

$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

Why do these snippets seem to be behaving differently? While the first one actually seems to work as ideal, that is keyup and blur being actually applied on the selector on keyup and blur event, while the other seems to be not working that ideally, it behaves like the snippet keeps on running always.

I am enabling and disabling input types on the live website using JavaScript.

Answer 1

You cannot pass a element through that function like that, it has to be the string selector.

$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

Won't work, in-fact the keyup and blur will be triggered every single time on the document rather than the selector

If you have the element in a variable there is no need to do this because you have a reference to the element anyway you only use this if the element can be added any time and you don't have a reference to it.

So

selector_2_id.on('keyup blur', function() {
   // DO SOMETHING
});

Should work perfectly.

Deeper look

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

So what this means is this

$(document).on('keyup blur', selector_2_id, function(){
  ^------^ = 1               ^-----------^ = 2
});

If 2 is null or omitted then 1 will be used for the event

Answer 2

As per the api , the selector need's to be a string and not a jquery object

selector Type: String - A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

http://api.jquery.com/on/

Answer 3

I believe this is what you are trying to do:

// Snippet 2
var selector_1_id = "input[name=selector_1_id]";
var selector_2_id = "input[name=selector_2_id]";

$(document).on("keyup blur", selector_1_id, function() {
    // DO SOMETHING
});

$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

The above will work (passing a string var as the selector), but why not just:

$(document).on("keyup blur", "input[name=selector_1_id]", function() {
    // DO SOMETHING
});

$(document).on("keyup blur", "input[name=selector_2_id]", function() {
    // DO SOMETHING
});

...unless you have a greater context in which you create this string or do something with it.