Jquery events not working on ajax loaded content

Question

The below code works. If there is some better way please let me know. If i use the script content which is present in test.html in the main page where I am loading test.html through ajax. The script doesn't work.

<html> 
    <head>
        <script src='jquerylocation' type='text/javascript'></script>
    </head>
    <body>
        <div id='ajaxload'></div>
        <button class='test'>load content via ajax</button>
    </body>


    <script>
        $(function(){
            $('.test').on('click',function(){
                  $('#ajaxload').load('test.html');
            });            
        });
    </script>
</html>

Test.html:

    <h1 class='heading'>Page via AJAX</h1>

    <script>
        $(function(){
            $('.heading').on('click',function(){
                $(this).css('color','red');  
            });                          
        });
    </script>

we have to load the script along with dynamically loaded content through ajax to work as you require.But disadvantage I felt was each time we send ajax request script loads all the time along with content. But I found only this solution. If anyone knows better solution please reply.

For example if change the code this way it wont work.

<html> 
    <head>
        <script src='jquerylocation' type='text/javascript'></script>
    </head>
    <body>
        <div id='ajaxload'></div>
        <button class='test'>load content via ajax</button>
    </body>


    <script>
        $(function(){
            $('.test').on('click',function(){
                  $('#ajaxload').load('test.html');
            });

            $('.heading').on('click',function(){
                $(this).css('color','red');  
            });                                   
        });
    </script>
</html>

Test.html:

    <h1 class='heading'>Page via AJAX</h1>

it's because you're wrapping it in the document.ready function, which won't be called after an AJAX call finishes. you can try adding your event handlers in a success callback function in your load() call, or use deferred events globally defined on your main page's script section — Derek, Jul 12 '13 at 17:04
please check my question once again I edited it. And please please reply with some code — Susheel Singh, Jul 12 '13 at 17:08
also make sure you're defining your script tag w/the proper attributes ie ` — Derek, Jul 12 '13 at 17:08
some browsers dont like it though, as HTML5 is not universally implemented (or even agreed upon) yet — Derek, Jul 12 '13 at 17:10
yeah you are right. But that might not be the problem for this question I guess. — Susheel Singh, Jul 12 '13 at 17:12

score 58 · Accepted Answer · answered Jul 12 '13 at 17:10

58

It's because you are binding the event on document ready. You have to use a delegate in order for this to work. Like on. It's because .header isn't on the page on the page when it's loaded. So no event is attached.

Your code should look some along the lines of this:

$('body').on('click','.heading',function(){
     $(this).css('color','red');  
});

It doesn't have to be body, but an element which isn't loaded after document ready, which is a parent of .heading.

answered Jul 12 '13 at 17:10

Peter Rasmussen

14,574
7
43
60

3

That is what this site is all about, glad you liked the answer! :) – Peter Rasmussen Jul 12 '13 at 17:26
1

Thanks, so simple, yet I was a million miles away with my own attempts. Binding to an already loaded element was key – henrywright May 01 '15 at 22:46
i am braking my head since 2 days. its working grate. new lesson learned. votes up – Asesha George Apr 02 '16 at 09:44
I was always under the impression using .on is enough but certainly learnt a new thing today.. "that it should be bound to an already loaded element".. – Arsalan May 12 '16 at 08:03

score -1 · Answer 2 · edited Oct 27 '14 at 09:33

-1

One option is to initialize your script on load success:

$('.test').on('click',function(){
   $('#ajaxload').load('test.html',function(){
      $('body').on('click', '.heading', function(){
          $(this).css('color','red');  
      }); 
    });
 });

edited Oct 27 '14 at 09:33

Peter Rasmussen

14,574
7
43
60

answered Apr 22 '14 at 19:17

Elias Escalante

196
2
12

Jquery events not working on ajax loaded content

2 Answers2

Linked