Wie JavaScript-Ladefunktion zweimal zu verwenden? (load in load)

Question

Ich habe eine Seite erstellt, auf der ich mit der onclick load Funktion eine php Datei in ein div laden kann. Jetzt möchte ich eine andere Datei in ein anderes div von der Datei laden, die ich vorher importierte.

So zum Beispiel:
[Kategorie 1 | Kategorie 2 | Kategorie 3 | Kategorie 4]
[hier bekam Datei 1 aus einer gepressten Kategorie eingeführt, die eine href enthält] [Hier ist der zweite div, die eine andere Datei aus dem href importieren, die von der ersten importierten Datei]

Irgendwie angeklickt wird, ich kann es nicht für den zweiten Import funktionieren. Der erste Import funktioniert. Ich verwende den gleichen Code vom ersten Import für den zweiten Import (nur andere IDs (#)).

Ein Teil der ersten Datei zu importieren:

<li ><a href="#" id="campaign" >Campaign</a ></li > 
<li ><a href="#" id="resources" >Resources</a ></li > 
<li ><a href="#" id="gang" >Gang</a ></li > 
<li ><a href="#" id="gambling" >Gambling</a ></li > 
<li ><a href="#" id="off-topic" >Off-Topic</a ></li > 

<script > 

$(document).ready(function() { 
    // Forum categories 
    $("#campaign").on("click", function() { 
     $("#main").load("forum/campaign.php"); 
    }); 

    $("#resources").on("click", function() { 
     $("#main").load("forum/resources.php"); 
    }); 

    $("#gang").on("click", function() { 
     $("#main").load("forum/gang.php"); 
    }); 

    $("#gambling").on("click", function() { 
     $("#main").load("forum/gambling.php"); 
    }); 

    $("#off-topic").on("click", function() { 
     $("#main").load("forum/off-topic.php"); 
    }); 

    }); 
</script > 

Teil der zweiten Datei zu importieren:

<a href="#" class="list-group-item small" id="message" style="background-color:black; color:white;" ><span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span > | <?php echo $sticky['header']; ?> </a > 

    <script > 
    $(document).ready(function() { 
     // Forum categories 
     $("#message").on("click", function() { 
      $("#getmessage").load("forum/getmessage.php"); 
     }); 
</script > 

Answer 1

Ein häufiges Problem mit dynamisch erstellten Inhalte aufrufen können.

Sie hatten wahrscheinlich das Problem zu vergessen, $ document.ready (func ... an einem bestimmten Punkt und Sie Code funktioniert nicht? Dies ist im Wesentlichen das gleiche Problem. Wenn Sie Code ohne Aufruf 'ausführen ready 'Die ID, die Ihr Skript aufruft, befindet sich nicht auf der Seite, so dass es nicht gefunden werden kann. Wenn Sie das neue Element dynamisch erstellen, wird es nicht auf der Seite angezeigt, wenn es zuerst ausgeführt wird.

Die einfache Problemumgehung besteht darin, ein Element auf der Seite auszuwählen, das vorhanden ist, wenn die Seite fertig ist, und dann später darauf zu schauen, vorausgesetzt, dass #main anfänglich in der Datei geladen ist und #message ein dynamischer Inhalt ist, auf den Sie klicken möchten auf, nachdem es lädt, sollte dies den Trick tun.

$(document).ready(function() { 
     // Forum categories 
     $("#main").on("click", "#message", function() { 
      $("#getmessage").load("forum/getmessage.php"); 
     }); 
}); 

Sie können auch jedes andere Element der höheren Ebene verwenden, wie 'Dokument' oder 'Körper usw. Aber je weniger von der Seite jquery, desto schneller müssen die Dinge aussehen sollte laufen. Es gibt viele, viele andere Stapelüberlauffragen, die das Problem beheben. Hier sind zwei in Richtung der Spitze der Google Ergebnisse:

Jquery event handler not working on dynamic content

jquery events on dynamically loaded content

Answer 2

Eine einfache elegante Lösung wäre eine Funktion erschaffen, die alle behandelt Ereignisse:

var myFunc = function() 
{ 
$("#campaign").on("click", function() { $ 
("#main").load("forum/campaign.php"); }); 
$("#resources").on("click", function() { $. ("#main").load("forum/resources.php"); }); 
$("#gang").on("click", function() { $("#main").load("forum/gang.php"); }); 
$("#gambling").on("click", function() { $("#main").load("forum/gambling.php"); }); 
$("#off-topic").on("click", function() { $("#main").load("forum/off-topic.php"); }); 

} 

Dann von der $(document).ready können Sie auf myFunc

nennen Und von der $("message").on Sie myFunc wieder