How to use jquery on HTML loaded after document.ready()

Question

I have several HTML elements, that are rendered by a javascript function on the page:

<a href="#" class="test1">Test</a>
<a href="#" class="test2">Test</a>
<a href="#" class="test3">Test</a>

I then have further javascript that I use to create a function when Test is clicked:

$(document).ready(function(){

   $( ".test1" ).click(function() {
   // Code here
   });

   $( ".test2" ).click(function() {
   // Different code here
   });

   $( ".test3" ).click(function() {
   // Different code here
   });

});

However, because the HTML inserted is not loaded at the same time the page loads (it is dynamically inserted after), my click function doesn't capture the event. How can I solve this?

Rory McCrossan · Answer 1 · 2013-11-09T14:40:36.090

1

You need to use a delegated event handler:

$(document).ready(function(){
    $(document)
        .on('click', '.test1', function() {
            // Code here
        })
        .on('click', '.test2', function() {
            // Code here
        })
        .on('click', '.test3', function() {
            // Code here
        });
});

Note, for best performance document should be changed to the closest static parent element which is available on DOM load.

edited Nov 09 '13 at 14:40

answered Nov 09 '13 at 14:02

Rory McCrossan

331,213
40
305
339

If I have a whole bunch of functions, can I nest them under (document).on? If so, what would be the syntax? – alias51 Nov 09 '13 at 14:07
It depends on the structure of those functions, and how logic flows between them. Can you edit your question to include those functions. – Rory McCrossan Nov 09 '13 at 14:10
Thanks, this doesn't seem to solve my problem. What's the best way to debug it? – alias51 Nov 09 '13 at 14:35
1

The same as all javascript - the console. Press F12 in your browser to see it. – Rory McCrossan Nov 09 '13 at 14:38
Just to be clear, you still need your document ready handler. Check my update – Rory McCrossan Nov 09 '13 at 14:40

score 0 · Answer 2 · answered Nov 09 '13 at 14:04

0

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$(document).on('click', '.test', function() { //code here });

Syntax

$( elements ).on( events, selector, data, handler );

answered Nov 09 '13 at 14:04

Tushar Gupta - curioustushar

58,085
24
103
107

Thanks, why use (document).ready at all then? What are the advantages/disadvantages of this? – alias51 Nov 09 '13 at 14:07
@alias51 Read [This](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) – Tushar Gupta - curioustushar Nov 09 '13 at 14:09

score 0 · Answer 3 · answered Nov 09 '13 at 14:51

0

You can make your click events "live", so they attach to objects as they are introduced to the dom. Just change .click(function(){ .... }); to .live('click', function(){ .... });

answered Nov 09 '13 at 14:51

Mattias Åslund

3,877
2
18
17

No, no. `.live()` has been deprecated. Use `.on()` instead. – Terry Nov 09 '13 at 14:55

How to use jquery on HTML loaded after document.ready()

3 Answers3