Javascript - Jquery, bind a dynamic selector with 'On' method (not a string)

Question

I want to use the 'On' function to attach a event because the others are deprecied(live, delegate,click...).

But the problem is : if we generate objects, we need to use a selector in parameters and this parameter is a string!!

Sample : (context : dynamic table)

//Wrong way

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

//Good way

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

Now How I do if I want use 'find' method in order to avoid that

    // ?? (find div)
    $("#dataTable tbody").on("click", "tr > ul > li > ul > li > div", function(event){
            alert($(this).text());
        });

   // What I would like to do
    $("#dataTable tbody").on("click", $(this).find("div"), function(event){
            alert($(this).text());
        });

   //and I don't want to do this :
    $("#dataTable tbody").find('div').on("click", function(event){
            alert($(this).text());
        });

Thank you !

Instead of "tr > ul > li > ul > li > div", just set a class on the DIV (btw, you can't have an UL directly inside a TR). Also, this smells like you're using tables for layout. — Šime Vidas
– Šime Vidas, Commented May 4, 2012 at 12:33
I don't use table, I just find a simple way to show my problem. Of course, I can use Class, Id... but I want use {parent(), children(), closest(),...} How I can do that ? — Frédéric GRATI
– Frédéric GRATI, Commented May 4, 2012 at 13:14
The second argument of the on() method is a selector string. You cannot use jQuery methods here. It has to be a string. So either 'ul > li > ul > li > div', or just 'ul ul div', as I wrote in my answer. — Šime Vidas
– Šime Vidas, Commented May 4, 2012 at 13:42

Matt · Accepted Answer · 2012-05-04 13:44:18Z

3

The working equivalent to:

// What I would like to do
$("#dataTable tbody").on("click", $(this).find("div"), function(event){
    alert($(this).text());
});

is...

// What I would like to do
$("#dataTable tbody").on("click", 'div', function(event){
    alert($(this).text());
});

If you to target div's inside the nested list, then you might be able to get away with:

// What I would like to do
$("#dataTable tbody").on("click", 'ul ul div', function(event){
    alert($(this).text());
});

... but it depends if you have other ul's in your tbody; you only need to be specific enough in your selector to remove the other elements from consideration. Very rarely would you need to be as specific as tr > ul > li > ul > li > div, and in that case it'd be best to apply a class to an element nearer the div (or the div itself) and select around that instead.

Also note that it is only live() that is depreciated. At the time of writing (1.7.2) delegate() is not, although I believe it will be in 1.8.

There is no talk of depreciating click() or it's shortcut counterparts.

edited May 4, 2012 at 13:44

answered May 4, 2012 at 12:03

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Šime Vidas Over a year ago

It seems that the OP wants to select only DIV elements which are inside nested lists (UL inside UL). Your code selects all DIV elements within the table.

Frédéric GRATI Over a year ago

Exactly, I want only DIV elements inside nested lists. The method 'find' was may a bad idea... If I need to use a children() or closest() function. The main goal is : I want to use the very practicals 'JQuery selection methods' with dynamic element.

Šime Vidas Over a year ago

@Matt Also, your first code block does not work, since $(this) doesn't refer to the TBODY element...

Matt Over a year ago

@user988587: I've updated my question to explain how to select the div in a nested ul.

Matt Over a year ago

@ŠimeVidas: I can't see in the question where the OP has said he wants $(this) to be the TBODY element? If he wants it, he can use event.delegateTarget in place of this.

|

Šime Vidas · Accepted Answer · 2012-05-04 13:38:08Z

1

If you want to select DIV elements which are inside nested lists, then this would be one way to do it:

$( '#foo' ).on( 'click', 'ul ul div', function () {

However, I recommend classes. Just set a class on your DIV elements and then:

$( '#foo' ).on( 'click', '.bar', function () {

answered May 4, 2012 at 13:38

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Collectives™ on Stack Overflow

Javascript - Jquery, bind a dynamic selector with 'On' method (not a string)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related