-1

I am adding dynamic content to a php page using jQuery. I don't have a problem adding the content I just can't seem to find a way to make the new content respond to a click event.

For example (I'm using a div here but could be a button or other type).

$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');

Edit: I am currently using jquery 1.9.1, I was using 1.6.2 but I am checking out magnific-popup which required a newer jquery version.

I didn't post my failed attempts (

 $("#newstuff").click(function() {...
 $("#newstuff").live('click', function() {...
 binding the click event, etc.

because I assumed that I am missing something fundamental that a more seasoned jQuery user would spot without the noise of broken code.

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
TheSteven
  • 900
  • 8
  • 23

5 Answers5

4

You can attach a click event before inserting the element into the DOM:

$('<div id="newstuff">...</div>').click(function(){ 
  //do something 
}).insertAfter('#oldstuff');
elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • Not familiar with doing it this way, will check this out... – TheSteven Jul 27 '13 at 09:46
  • This shows promise and I will explore it more in the future. Currently I separate my content insertion/modification code from my event handling code and as such there was another response that was a better solution to what I was looking for. Thank you for your input! – TheSteven Jul 27 '13 at 20:01
1

can't seem to find a way to make the new content respond to a click event.

You have to do event delegation 

$("#oldstuff").on("click", '#newstuff',function(){
alert( $(this).text() );
});
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Suresh Atta
  • 120,458
  • 37
  • 198
  • 307
0

What you need is to attach the event to the parent element.

HTML:

<div id="parent">
    <div class="thediv">Hello</div>
</div>

JavaScript:

function addDiv() {
    var div = document.createElement('div');
    div.className = 'thediv';
    document.getElementById('parent').appendChild(div);
}

$('#parent').on('click', '.thediv', function() {
    // ...
});

See if this technique works.

Samer
  • 973
  • 1
  • 6
  • 15
-1

It is probably you are binding event before attaching DOM and also in latest version of jquery library live method is deprecated so try to bind click even after attaching DOM or you can use following code...

first add DOM.

    $("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');

and then bind event.

    $('#newstuff').on('click',function(){alert('do your stuff!')});

Or

    $('#newstuff').click(function(){alert('do your stuff!')});
Anand Jha
  • 10,404
  • 6
  • 25
  • 28
  • Any reason your entire post is code? – tckmn Jul 27 '13 at 07:35
  • Neither of these work on dynamic content. If I understand correctly what the other comments are saying it's because '#newstuff' was not part of original content loaded in the DOM but added afterward. – TheSteven Jul 27 '13 at 09:50
  • you can bind event on existing DOM as your DOM (
    Some content that should respond to click event
    ) loaded later so you should bind event after loading DOM then it will work     – Anand Jha Jul 27 '13 at 10:35
-2

Try this

$("#yourElementId").live("click",function(){
  alert( $(this).text() );
 });

As .click is not working after loading dom or dynamically created element

Neeraj Dubey
  • 4,401
  • 8
  • 30
  • 49
  • Can anyone Explain why downvote that post. Wheather we all know after dom loading `.click` is not working as `.click` is attach before dom loading. So jquery have new method `.live` or `.on` but `.live` is depriciated newer version. And same is working in my case. – Neeraj Dubey Jul 27 '13 at 04:58
  • 1
    Because `.on()`'s syntax differs from `.live()` where in the objet selected is the static element, the first argument is the event, the 2nd is the dynamic element, and the third is the callbakc. – Ohgodwhy Jul 27 '13 at 05:06
  • @Ohgodwhy for your kind attention, i have found syntax form Jquery official site `http://api.jquery.com/on/` now can you also explain why ? – Neeraj Dubey Jul 27 '13 at 05:14
  • @All Downvoter i have made sample on Fiddle`http://fiddle.jshell.net/dubeynee/RmBpZ/1/` where i have add `p` dynamically and attach `click` event by `.on` now tell whats wrong with you. – Neeraj Dubey Jul 27 '13 at 05:20
  • Because in your jsFiddle, you do the append before the click, therefroe it's available in the DOM. [Place it after the click](http://fiddle.jshell.net/qM6cE/). And once you've done that, [Check it out in proper fashion](http://fiddle.jshell.net/w5BdZ/) – Ohgodwhy Jul 27 '13 at 05:30
  • 1
    In your example you are binding the handler *after* you added the new DOM element. Of course that works. But your explanation is wrong. It seems you suggested to use event delegation, but you are not showing how. The code you posted is exactly the same as using .click. Please read the complete .on documentation, there is a section which explains this. – Felix Kling Jul 27 '13 at 05:34
  • Can you all tell me wheather my code is working or not.I think it's working and requested to all please leave comment before downvote so that people can improve himself. – Neeraj Dubey Jul 27 '13 at 05:38
  • 1
    @NeerajDubey: _Read_ the comments above. There is plenty of explanation about why your answer is wrong and/or incomplete. – Lightness Races in Orbit Jul 27 '13 at 05:47