AJAX POST 后 HTML 链接不起作用答案

【问题标题】：HTML Links do not work after AJAX POSTAJAX POST 后 HTML 链接不起作用
【发布时间】：2015-06-18 18:57:16
【问题描述】：

背景：我正在开发一个小型 Web 应用程序。 AJAX 将成功将数据发布到操作（create.php），create.php 将执行必要的 mysql 查询。一旦 AJAX 完成，我会在div id="container"></div> 上附加一条消息，通知用户执行成功，然后清除内容“容器”以供将来使用；然而，问题就在这里。

问题： AJAX 执行后，我无法点击已加载到页面（page.php）的任何 HTML 链接。我必须刷新页面才能单击任何链接并跟随它们到达目的地。是什么导致这种情况发生，我该如何解决？

AJAX 不需要返回结果。一旦请求完成，它只需要执行指定的 jQuery 代码。凭直觉，我更改了 create.php 以回显 $_POST 数组并让 AJAX 作为结果返回它。一旦 AJAX 将结果加载到“容器”中，我仍然无法单击 page.php 上加载的任何链接

答案： AJAX 调用后 DOM 未重新加载，导致引导下拉菜单无法正常工作。每次调用后必须手动重新初始化引导下拉类。这个已经详细回答了here

创建.php

<?php
if($_POST){
//run mysql query
}else{
//do nothing
}
?>

form.php

<form id="new-items">
<input type="text" name="item" />
<input type="button" onclick="create_item()" name="Submit" value="Submit" />
</form>

page.php

<html>
<head>
<script>
$(document).ready(function(){
  $("#add_items").click(function(){
    event.preventDefault();
    $("#content").load("form.php");
  });
 });
function create_item(){
    var form_data = $("#new-items").serialize();

    var request = $.ajax({
        url: "create.php",
        type: "POST",
        data: form_data,
    });

    request.done(function(){

        $("#content").append('<div>User was added successfully</div>');
        setTimeout(function(){
            $("#content").fadeOut("slow");
        }, 5000);
        setTimeout(function(){
            $("#content").empty();
        }, 8000);
    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });
}
</script>
</head>
<body>
<nav>
<a href="link1.php">Link1</a>
<a href="link2.php">Link2</a>
<a href="#" id="add_items">Add New Items</a>
</nav>
<div id="content"></div>
</body>
</html>

【问题讨论】：

因为您在 php 文件中的 onclick 是在包含在它所在的 dom 中之前呈现的，因此它在点击时没有绑定到该函数。
$("#add_items").click(function(){ 应该是$("#add_items").click(function(e){，这样您就可以为e.preventDefault 传递事件对象
在创建 dom 后在 @iam-decoder 上构建在 dom 中创建的项目，您可以在 jquery 中查找 api.jquery.com/on on 功能，我相信这取代了 jQuery live 功能此后已被弃用。
@iam-decoder .click() 函数工作正常。那不是我的问题。 onclick 函数 create_item() 有效。 AJAX 完成后，<nav> 部分中的任何<a href="">TEXT</a> 链接在没有页面刷新的情况下都不起作用。
<nav> 中我只能看到 1 个链接。其他链接是动态添加的吗？

标签： javascript php jquery html ajax

【解决方案1】：

在fadeOut #content 元素之后，它仍然是隐藏的。下次调用 AJAX 函数时，它会将 create.php 加载到不可见元素中。

试试：

        setTimeout(function(){
            $("#content").fadeOut("slow", function() {
               $(this).empty().show();
            });
        }, 5000);

其他问题：<div class="content"> 应该是<div id="content">；您没有在脚本顶部包含jquery.js；您没有将事件对象 e 传递给您的 click 处理程序。

page.php 现在应该如下所示：

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#add_items").click(function(e){
        e.preventDefault();
        $("#content").load("form.php");
    });
  });
    function create_item(){
        var form_data = $("#new-items").serialize();

        var request = $.ajax({
            url: "create.php",
            type: "POST",
            data: form_data,
        });

        request.done(function(){

            $("#content").append('<div>User was added successfully</div>');
            setTimeout(function(){
                $("#content").fadeOut("slow", function() {
                    $(this).empty().show();
                });
            }, 5000);
        });

        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }
    </script>
</head>
<body>
    <nav><a href="#" id="add_items">Add New Items</a></nav>
    <div id="content"></div>
</body>
</html>

【讨论】：

您的建议适用于清除<div id="content"></div>；但是，它并没有解决无法点击<a href="link1.php">Link1</a>并跟随它到它需要去的地方的问题。
就目前而言，我完全无法重现您所描述的这个问题。
按照我的描述修复代码，然后告诉我们确切你还存在什么问题。否则，我将投票结束这个问题，因为“无法重现”。
Jquery 包含在内，但在页面的摘录中省略。 <div "class"> 输入错误，现在正确显示“id”。我了解将事件处理程序 (e) 向下传递，但您能否详细说明这将如何影响与此无关的其他链接？
不，我不能，因为我根本无法重现该问题。您需要向我们提供一个complete, short, self-contained, correct example，向我们显示错误。

【解决方案2】：

<nav> 中的锚链接自然会使用新内容“刷新”页面。

如果您想通过 ajax 请求加载内容，那么您应该尝试以下操作：

为链接添加一个公共类

<nav>
<a href="link1.php" class="anchor">Link1</a>
<a href="link2.php" class="anchor">Link2</a>
<a href="form.php"  class="anchor">Add New Items</a>
</nav>

然后将click 事件附加到每个链接，该事件会拦截e.preventDefault() 的默认页面刷新。您可以使用该链接的href 属性执行ajax 请求。

$(function(){
  $(".anchor").on('click', function(e){
    e.preventDefault();
    var $this=$(this);
    $("#content").load($this.attr('href'));
  });
});

【讨论】：

感谢您的回复，但与手头的问题无关。问题不在于如何使用 AJAX 加载内容。问题是一旦执行 AJAX 命令，页面上的 HTML 链接就不再可点击。例如，通过单击“添加新项目”来加载表单。填写表格并单击按钮提交数据。 AJAX 完成并将消息附加到 div 容器。然后清空容器。当我尝试导航到网站的另一部分时，链接不起作用。

【解决方案3】：

在 AJAX 调用后 DOM 没有被重新加载。 Boostrap 下拉模块必须在每次调用后手动重新初始化。详细回答在这里：answer

【讨论】：