Jquery-Ereignisse funktionieren nicht bei mit Ajax geladenen Inhalten

Lesezeit: 3 Minuten

Jquery Ereignisse funktionieren nicht bei mit Ajax geladenen Inhalten
Susanne Singh

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>

  • Das liegt daran, dass Sie es in die document.ready-Funktion einschließen, die nicht aufgerufen wird, nachdem ein AJAX-Aufruf beendet wurde. Sie können versuchen, Ihre Event-Handler in einer Erfolgs-Callback-Funktion in Ihrem load()-Aufruf hinzuzufügen, oder zurückgestellte Ereignisse verwenden, die global im Skriptabschnitt Ihrer Hauptseite definiert sind

    – Derek

    12. Juli 2013 um 17:04 Uhr

  • Bitte überprüfen Sie meine Frage noch einmal, ich habe sie bearbeitet. Und bitte bitte antworten Sie mit einem Code

    – Susheel Singh

    12. Juli 2013 um 17:08 Uhr

  • Stellen Sie außerdem sicher, dass Sie Ihr Skript-Tag mit den richtigen Attributen definieren, dh <script type="text/javascript">

    – Derek

    12. Juli 2013 um 17:08 Uhr

  • gemäß html5 DOCTYPE ist es in Ordnung, denke ich, nur

    – Susheel Singh

    12. Juli 2013 um 17:09 Uhr

  • Einige Browser mögen es jedoch nicht, da HTML5 noch nicht allgemein implementiert (oder sogar vereinbart) ist

    – Derek

    12. Juli 2013 um 17:10 Uhr

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.

  • Darum geht es auf dieser Seite. Ich freue mich, dass Ihnen die Antwort gefallen hat! 🙂

    – Peter Rasmussen

    12. Juli 2013 um 17:26 Uhr

  • Danke, so einfach, aber ich war eine Million Meilen entfernt mit meinen eigenen Versuchen. Die Bindung an ein bereits geladenes Element war der Schlüssel

    – Hendrik Wright

    1. Mai 2015 um 22:46 Uhr

  • Ich bremse meinen Kopf seit 2 Tagen. sein Arbeitsrost. neue Lektion gelernt. Stimmen auf

    – Asesha George

    2. April 2016 um 9:44 Uhr

  • Ich hatte immer den Eindruck, dass die Verwendung von .on ausreicht, aber heute habe ich sicherlich etwas Neues gelernt … “dass es an ein bereits geladenes Element gebunden werden sollte”.

    – Arsalan

    12. Mai 2016 um 8:03 Uhr

1647106269 452 Jquery Ereignisse funktionieren nicht bei mit Ajax geladenen Inhalten
Elias Escalante

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');  
      }); 
    });
 });

994590cookie-checkJquery-Ereignisse funktionieren nicht bei mit Ajax geladenen Inhalten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy