How to use JQuery.find() when DOM is dynamic

Question

I have a cascading menu with the following flow;

click on an item from menu-1
creates and updates menu-2 li elements
click on an item from menu-2
creates and updates menu-3 li elements

etc..

```

$firstMenu = $('.prime-menu');
$secondtMenu = $('.second-menu');
$thirdMenu = $('.third-menu');

```

As i'm traversing through different elems. within each menu, using find() comes as a blessing, the issue is that the script loads when no menu other than the first menu is created so $secondtMenu.find('.item-year').click(function (clickEvent) {}) is 0 length.

What are my options in JQuery to make my find() functions work on elements that are not loaded yet in the DOM?

I thought of creating an event listener, but I think there are more terse approaches than that.

@coreyward It's also quite easy with regular markup and jQuery. No need for react. — user1751825, Oct 13 '18 at 15:38
Your question isn't clear at all about the context of your code, but this sounds like a duplicate of [this question](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Rory McCrossan, Oct 13 '18 at 15:40
It doesn't look like you even need to use "find". There is no need to attach the click handler to every individual element of a particular class. You can do it all with a single "on" statement. — user1751825, Oct 15 '18 at 06:49

Danijel · Accepted Answer · 2018-10-13T16:18:24.867

1

You should use delegates when dealing with dynamic HTML. For instance, use an outer element like document or body to "start" your finds.

$(document).find(".prime-menu");

EDIT: Find and event delegation The solution was to use find with event delegation. Example event.

$(document).find(".prime-menu").on('mouseenter', '.track-table tbody tr', function(){ });

edited Oct 13 '18 at 16:18

answered Oct 13 '18 at 15:34

Danijel

1,145
8
15

I think I wasn't clear, `$firstMenu = $('.prime-menu');` => class `.prime-menu` exists when DOM loads, it's the `
`s that don't exist.

clusterBuddy

Oct 13 '18 at 15:38

Okay, the same rule applies. In order for dynamic content find to work you should use delegates. Use outer element and event delegation to bind events and find dynamic children. Example delegate event. `$(document).find(".prime-menu").on('mouseenter', '.track-table tbody tr', function(){ });` – Danijel Oct 13 '18 at 15:41

1

yup, that's what I was missing `.on()` with class stipulation for child. Just change the answer to the comment and im voting you – clusterBuddy Oct 13 '18 at 15:54

find is superfluous here. You can eliminate it altogether, and make the code simpler. – user1751825 Oct 15 '18 at 06:50

It depends strongly on his case, he can choose to use it or not. We don't know the whole picture, so making assumptions like that by looking at three lines of code is too presumptuous. – Danijel Oct 15 '18 at 10:58

Just saying, in your sample, the find isn't required. Could just do $(".prime-menu").on... It will do the same thing. – user1751825 Oct 15 '18 at 13:29

Of course, he knows that, you know that, I know that. The example is general providing info about what you can chain so that he can best decide what fits his code most accurately. The point was how to resolve issue with dynamic html :) – Danijel Oct 15 '18 at 13:34

It seems likely that he's trying to use 'find' because he doesn't know how to use 'on' correctly, to achieve the same result. – user1751825 Oct 15 '18 at 22:36

user1751825 · Answer 2 · 2018-10-14T00:34:38.970

0

Bind the click handler to the menu parent, not the actual menu items.

Something like this might work...

$("#menuparent").on("click",".item-year",function(event) {
    var clicked_element = event.currentTarget;
});

Doing it this way, even if the element with class .item-year is added to the dom after the click event is bound, it will still register the click.

edited Oct 14 '18 at 00:34

answered Oct 13 '18 at 15:36

user1751825

4,029
1
28
58

You have ESP or something, I was aiming to get the clickEvent, so the issue is that after the click, `clickEvent.currentTarget.className` is the parent, not the `
`, how do you overcome this

clusterBuddy

Oct 13 '18 at 15:50

@clusterBuddy I've updated the answer to include a bit more detail. You would want to use "on" rather than binding the click directly. – user1751825 Oct 14 '18 at 00:35

score 0 · Answer 3 · answered Oct 13 '18 at 15:41

You state that when you click on an item from menu-1 it creates and updates menu-2 li elements. In this function is where you should do your event binding. The DOMElement will exist in js before being added to the dom, and that is where your bindings should be set.

If you need help share this code with us I'm sure myself or someone will be able to help you sort it out.

How to use JQuery.find() when DOM is dynamic

3 Answers3