Question

我有一个页面，其中包含多个具有各种属性的链接（这些属性将从数据库中提取）：

的index.php

<html>
<head>
<script type='text/javascript' src='header.js'></script>
</head>
<body>
<a href="#" class="link_click"id="12">My_Link_1</a>
<a href="#" class="link_click"id="21">My_Link_2</a>

<div id='my_container'> </div>

</body>
</html>

我的header.js文件包含：

$(document).ready(function(){
    $('.link_click').click(function(){
      $("#my_container").load("classes/class.project.php", {proj: $(this).attr('id')} );
      return false;
  });
});

class.project.php非常简单：

<?php
echo "<div id='project_container'>project = ".$_POST['proj']." : end project</div>";
?>

这会将ID变量（实际上来自数据库）加载并传递给class.project.php。它适用于第一次链接点击（任一链接都可以）。单击一个链接后，没有与此div类的其他链接将起作用。感觉就像javascript加载class.porject.php一样，它不会刷新到#my_container div。

我尝试按照JQuery Fourm上peterpeiguo的建议运行此操作，并在.each内包含测试警告框：

复制代码

$(document).ready(function() {
     $('.link_click').each(function() {
        $(this).click(function() {
          alert($(this).html());
     });
  });
});

这似乎适用于警报框。但是当它应用于.load()时，它不会使用新传递的变量重新加载页面。事实上，它甚至没有重新加载当前页面。该链接在此时不执行任何功能。

可以在此处查看示例网站：http://nobletech.net/gl/

Answer 1

我查看了您发布的链接，问题是当您正在加载时，您正在用新的元素替换页面上的元素，因此事件处理程序不再起作用。

您真正想要做的是定位负载。类似的东西：

$("#project_container").load("classes/class.project.php #project_container", {proj: $(this).attr('projid')} );

这只会将东西装入适当的容器中，使链接和其他东西保持完整。

理想情况下，php脚本应该只返回你需要的东西，而不是整个页面的标记。

BTW-缓存在这种情况下不应该是一个问题，因为.load在传递参数时使用POST。你只需要担心使用GET进行ajax缓存

Answer 2

听起来请求缓存到我这里。

试试这个：

 $.ajaxSetup ({
    // Disable caching of AJAX responses */
    cache: false
});

Answer 3

很抱歉，但这可能是完全错误的，但在检查了您的XHR响应后，我发现您发回的html替换了您现有的元素。

因此，快速解决方法是在XHR响应中发送以下内容（您的php脚本也应输出此内容）：

<script>
$('.link_click').each(function() {
    $(this).click(function() {
      alert($(this).html());
 });
</script>

用于众多链接的相同JQuery点击功能

3 个答案: