Event binding for a dynamically generated element within a dynamically generated element in jQuery

Question

I'm trying to use 'click' on a dynamically generated DOM. I know that I can just use live or on, however my dynamically generated content is within multiple dynamically generated pieces of content and live/on no longer works.

So my code looks something like this but with more elements before El_b:

El_a = document.createElement("li");
El_b = document.createElement("a");
El_b.id = "myEl";
El_a.appendChild(El_b);

Is there a way to make this work?

PS: I've also tried the livequery jQuery plugin.

DOM means Document Object Model. Sometimes, DOM is colloquially used to mean an instance of the Document Object Model. But in either case, calling individual elements "DOMs" is totally incorrect. They are elements in a single DOM. Don't call them DOMs, this is confusing and misleads people into thinking you are referring to multiple documents. Please update your question to remove references to "DOMs". — ErikE
– ErikE, Commented Nov 28, 2012 at 8:45
If you're going to use jQuery, you should use it for everything, including create new elements, setting attributes and appending elements. — Aesthete
– Aesthete, Commented Nov 28, 2012 at 8:56
Unfortunately, the code that is creating the new elements is not mine. — user1811367
– user1811367, Commented Nov 28, 2012 at 9:10
Please provide a sample page at jsfiddle.net so we can see the problem. — ErikE
– ErikE, Commented Nov 28, 2012 at 21:56

score 1 · Accepted Answer · 2012-11-28 09:19:07Z

1

As far as delegation is concerned, you always have at least one static DOM element available to you, which is the document. If you can't find a closer element to delegate to, delegate to this.

However, delegation seems to be unnecessary here. The entire process of creating your elements and attaching listeners could be condensed to:

var a = $("<li/>").append($("<a/>").attr("id", "myElement")).click(function () {
    alert('hello');
});

If, as you say, you cannot change the object creation, you can still select it by its ID and attach the listener:

$('#myElement').click(function () {
    alert('hello');
});

Also, those are document fragments, not documents proper, and certainly not DOMs.

edited Nov 28, 2012 at 9:19

answered Nov 28, 2012 at 8:44

user1726343

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

3 Comments

user1811367 Over a year ago

Unfortunately, the object creation is not in my code. Is there any way to directly bind 'click' to the element so that I can use it with $("#myName").click ?

user1811367 Over a year ago

The problem I'm having though is that using $('#myElement').click won't work if the element is created with document.createElement(). It usually works if I have $('#myElement').on('click',blah) but it's not working in this case if the element being created has been appended to another

user1726343 Over a year ago

@user1811367 It will still work regardless of how you created it, provided you have actually added it to the document. Right now you're making two elements and adding one to the other, but neither of them are in the document yet.

ErikE · Accepted Answer · 2012-11-28 21:55:09Z

1

If you want to bind a function on the click event on El_b, you can just do this :

$(El_b).click(function() {
    // Your code here
});

But you can use on i think. Even if you create multiple DOM elements. You can use the document or the body. Example :

$('body').on('click', 'li a.my_class', function() {
    // Your code here
});

edited Nov 28, 2012 at 21:55

ErikE

50.7k23 gold badges157 silver badges201 bronze badges

answered Nov 28, 2012 at 8:45

Magus

15.1k4 gold badges40 silver badges52 bronze badges

2 Comments

user1811367 Over a year ago

Is there any way to do this if I don't know that the hierarchy is body>li>a? So all I have is body>?????>a.

Magus Over a year ago

use a css class. And all you have to do is 'a.my_class'

Collectives™ on Stack Overflow

Event binding for a dynamically generated element within a dynamically generated element in jQuery

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related