Laden Sie Seiteninhalte und Links innerhalb von div;

Question

Okay, im Grunde, was ich versuche zu erreichen, ist laden Links, die innerhalb der targetDiv innerhalb der div nicht auf der ganzen Seite laden angeklickt werden; Unten ist das Skript, das ich gerade benutze.

<div id = "targetDiv"></div> 

<script> 
$('document').ready(function() { 
    $('#targetDiv').load('/test.php'); 
}); 
</script> 

Also das Problem, das ich habe, ist, dass, wenn ein Link geklickt wird, die in der targetDiv der ganzen Seite geladen wird geladen wird und der Benutzer wird von der ursprünglichen Seite genommen und auf die neue Seite genommen; und was ich will, ist die neue Seite laden innerhalb der targetDiv.

Answer 1

Sie benötigen einen Click-Handler haben, die das Standardereignis verhindert und verwendet auch die href load() wieder

$(function(){ 
    $('#targetDiv').on('click', 'a', function(e){ 
     e.preventDefault();// prevent browser from opening url 
     $('#targetDiv').load(this.href);  
    }); 
}); 

Dies ist ein delegierte Zuhörer für zukünftige <a> zu berücksichtigen, die während der Laufzeit nicht existieren

Answer 2

Der Hauptgrund, warum dies nicht funktioniert, liegt an CORS. Wenn Sie mein Code-Snippet beim Ausführen eines PHP-Webservers versuchen, funktioniert es nahtlos.

Es scheint, dass ein Ereignis-Listener für das Klickereignis fehlt. Angenommen, Ihr hat id = „link“:

jQuery

$("#link").click("click", function() { 
    // Do the AJAX request 
    $.ajax({ 
    url: "/text.php" 
    }) 
    .done(function(data) { // data fetched from php file 
    // Load data into div 
    $('#targetDiv').html(data); 
    }); 

    /* 
    // this would also work 
    $("#targetDiv").load('text.php'); 
    */ 
}) 

<div id="targetDiv"></div> 

Answer 3

Die einfache Antwort auf das, was Sie zu tun versuchen, ist, bind Click-Ereignisse Tags innerhalb Ihrer Ziel div zu verankern und laden ausdrücklich den Inhalt das div wieder.

$("#targetDiv a").click(function() { 
    $('#targetDiv').load(this.href); 
}); 

Wie es getrennte Note, scheint es, wie Sie iframe-ähnliches Verhalten erwartet worden sein, die das Element sein können Sie hierfür gehen.