click function after dynamically changing data using .html() [duplicate]

Question

I am trying to implement a click function inside a div with some nested children tags such as span, td, etc. However, these nested tags are loaded dynamically, mostly using ajax(). The returned result is displayed using .html(data) function. However, once the data is changed and new tags are added, the old javascript written to detect the clicks no longer work.

I want to know if there is a way to make this work?

An example of what i am talking about can be found here.

Look into the 3-argument version of jQuery .on()

Pointy
– Pointy

2013-05-05 23:10:28 +00:00
Commented May 5, 2013 at 23:10 — Pointy
– Pointy, Commented May 5, 2013 at 23:10

thebreiflabb · Accepted Answer · 2013-05-05 23:11:37Z

3

You are supposed to attach the event handler on the wrapper element like so:

http://jsfiddle.net/V4Sfw/1/

$("#testing").on("click", "span", function() {
    alert("now?");
});
$("#testing").html("<span>How about now?</span>");

answered May 5, 2013 at 23:11

thebreiflabb

1,54410 silver badges19 bronze badges

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

Comments

TheHippo · Accepted Answer · 2013-05-05 23:10:48Z

1

You could use live to attach handlers that always work, as long you know the structure of the loaded HTML.

answered May 5, 2013 at 23:10

TheHippo

63.3k15 gold badges77 silver badges101 bronze badges

2 Comments

Pointy Over a year ago

This is true but .live() has been deprecated for a long time. The current release uses a 3-argument version of .on().

TheHippo Over a year ago

That seems to be right. It's been a while since used jQuery.

Collectives™ on Stack Overflow

click function after dynamically changing data using .html() [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related