Jquery-Ereignisse funktionieren nicht bei mit Ajax geladenen Inhalten

Question 1

Der folgende Code funktioniert. Wenn es einen besseren Weg gibt, lassen Sie es mich bitte wissen. Wenn ich den Skriptinhalt verwende, der in test.html auf der Hauptseite vorhanden ist, wo ich test.html über Ajax lade. Das Skript funktioniert nicht.

<html> 
    <head>
        <script src="https://stackoverflow.com/questions/17620211/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>

Wir müssen das Skript zusammen mit dynamisch geladenen Inhalten über Ajax laden, um wie gewünscht zu funktionieren. Aber ich hatte den Nachteil, dass wir jedes Mal, wenn wir Ajax-Anforderungsskripts senden, die ganze Zeit zusammen mit Inhalten laden. Aber ich habe nur diese Lösung gefunden. Wenn jemand eine bessere Lösung kennt, bitte antworten.

Wenn Sie zum Beispiel den Code auf diese Weise ändern, funktioniert es nicht.

<html> 
    <head>
        <script src="https://stackoverflow.com/questions/17620211/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>

Question 2

Das liegt daran, dass Sie das Ereignis an das fertige Dokument binden. Sie müssen einen Delegaten verwenden, damit dies funktioniert. Wie an. Das liegt daran, dass .header nicht auf der Seite auf der Seite ist, wenn es geladen wird. Es ist also kein Ereignis angehängt.

Ihr Code sollte in etwa so aussehen:

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

Es muss nicht body sein, sondern ein Element, das nicht nach document ready geladen wird, das ein Elternteil von ist .Üerschrift.

Question 3

Eine Möglichkeit besteht darin, Ihr Skript bei erfolgreichem Laden zu initialisieren:

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