Question

好吧，基本上我想要实现的是在整个页面上加载div内部targetDiv内部的加载链接;以下是我目前正在使用的脚本。

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

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

所以我遇到的问题是当点击链接时加载targetDiv整个页面加载，用户从原始页面被带到新页面;而我想要发生的是targetDiv内的新页面加载。

Answer 1

您需要有一个阻止默认事件的点击处理程序，并且还需要再次使用href load()

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

这是一个委派的监听器，用于说明在运行时不存在的未来<a>

Answer 2

您要尝试执行的操作的简单答案是将单击事件绑定到目标div中的锚标记，并再次将内容显式加载到该div。

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

因为它单独注释，看起来你可能一直在期待类似iframe的行为，这可能是你为此而采用的元素。

Answer 3

这不起作用的主要原因是text()。如果您在运行PHP Web服务器时尝试我的代码段，它将无缝地工作。

您似乎错过了点击事件的事件监听器。假设你有id =＆＃34;链接＆＃34;：

<强>的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>

加载div内的页面内容和链接;

3 个答案: