События Jquery, не работающие с загруженным содержимым ajax

Ниже приведен код. Если есть лучший способ, пожалуйста, дайте мне знать. Если я использую содержимое script, которое присутствует в test.html на главной странице, где я загружаю test.html через ajax. script не работает.

<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>

мы должны загрузить script вместе с динамически загружаемым контентом через ajax для работы, как вам нужно. Но недостаток, который я чувствовал, каждый раз, когда мы отправляем запрос ajax script, загружается все время вместе с содержимым. Но я нашел только это решение. Если кто-нибудь знает лучшее решение, ответьте.

Например, если изменить код таким образом, он не будет работать.

<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>

Ответ 1

Это потому, что вы привязываете событие к документу. Для этого вам нужно использовать делегата. Как on. Это потому, что .header не находится на странице на странице при загрузке. Таким образом, никакое событие не прилагается.

Ваш код должен выглядеть примерно следующим образом:

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

Это не должно быть тело, но элемент, который не загружен после того, как документ готов, который является родителем .header.

Ответ 2

Один из вариантов - инициализировать успешное выполнение script:

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