divの中にページの内容とリンクを読み込みます。

Question

基本的に私が達成しようとしているのは、div内のtargetDivの中でクリックされたロードリンクです。以下は私が現在使っているスクリプトです。

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

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

だから私がいる問題は、リンクがクリックされたときに targetDivページ全体のロード中にロードされ、ユーザーが元のページから取られ、新しいページに連れて行かれたということです。私が何をしたいのかは、 targetDiv内の新しいページの読み込みです。

Answer 1

は、デフォルトのイベントを防止し、また再び

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

これは、実行時

に存在していない将来 <a>を占めるに委譲リスナーです load()へのhrefを使用していますクリックハンドラを持っている必要があります

Answer 2

これがうまくいかない主な理由は、CORSです。 PHP Webサーバーの実行中にコードスニペットを実行しようとすると、シームレスに動作します。

clickイベントのイベントリスナーがありません。 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

あなたがやろうとしているものに簡単な答えは、バインドクリックイベントは、あなたのターゲットのdiv内のタグを固定して明示的にコンテンツをロードすることである：あなたのid =「リンク」を持っていると仮定すると、そのdivをもう一度。それ別の注意点としては

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

あなたはこのために行くの要素とすることができる、IFRAMEのような振る舞いを期待されている可能性のように、それはそうです。