applying script to elements inserted via jquery .html()

Question

i'm kinda new to scripting so this might be a bit basic, but i couldn't find an answer anywhere. To improve my webpage loading time I made some HTML element load (via AJAX) and inserted only when a certain button is clicked, using the jquery .html() function. That worked, but now all the jquery commands which referred to that element don't seem to apply. I'm guessing it's because the original commands were loaded before the new HTML?

For example, code like this:

$(document).ready(function(){   
$('#myButton').click(function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').click(function(){
alert ("WORKED");
});
}

How do I make the #touchMe.click command apply to the new incoming HTML?

thanks a lot

someone just asked this question like 10 minutes ago: stackoverflow.com/questions/7429374/… — Ben Lee
– Ben Lee, Commented Sep 15, 2011 at 10:40
There might be an answer for you here. stackoverflow.com/questions/203198/… — amsandun
– amsandun, Commented Mar 12, 2015 at 18:30

Niko · Accepted Answer · 2011-09-15 10:41:10Z

1

Take a look at live()

$('#touchMe').live('click', function() {

answered Sep 15, 2011 at 10:41

Niko

26.8k9 gold badges97 silver badges112 bronze badges

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

Comments

ipr101 · Accepted Answer · 2011-09-15 10:41:53Z

1

Try -

$('#touchMe').live('click',function(){
alert ("WORKED");
});

answered Sep 15, 2011 at 10:41

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

Ghazanfar Mir · Accepted Answer · 2011-09-15 10:41:54Z

1

Instead of

$('#touchMe').click(function(){
alert ("WORKED");
});

use

$('#touchMe').live('click', function(){
alert ("WORKED");
});

answered Sep 15, 2011 at 10:41

Ghazanfar Mir

3,5412 gold badges28 silver badges42 bronze badges

3 Comments

Amir Over a year ago

OK! thanks, works (after updating jQuery to the correct version - live() only exists from 1.3 on). This is a simple example code we've discussed here. The real deal includes many more commands. So, for general knowledge, would you say correct and best practice is using live() instead of all commands that deal with html that would arrive later on?

Ghazanfar Mir Over a year ago

Yes, I think live seems to be consistent and reliable as compared to others. But I can't say anything on behalf of JQuery Developers :)

Amir Over a year ago

Thanks a lot. to all you guys - not sure i know exactly how this whole voting / feedback thing works yet, but you were all very helpful and efficient. cheers

roselan · Accepted Answer · 2011-09-15 10:41:53Z

0

you use .live() or .delegate() function instead of click.

$(document).ready(function(){   
  $('#myButton').live('click', function(){
    $('#placeHolder').html('<div id="touchMe">click me</div>');
  });
  $('#touchMe').live('click', function(){
    alert ("WORKED");
  });
}

note: the live on "mybutton" is not necessary in this example.

answered Sep 15, 2011 at 10:41

roselan

3,7651 gold badge23 silver badges20 bronze badges

Collectives™ on Stack Overflow

applying script to elements inserted via jquery .html()

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related