Fatal编程技术网
  • javascript/
  • Javascript HTML链接在AJAX发布后不起作用

Javascript HTML链接在AJAX发布后不起作用

javascript php jquery html ajax

Javascript HTML链接在AJAX发布后不起作用,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,背景：我正在开发一个小型web应用程序。AJAX将成功地将数据发布到操作（create.php），create.php将执行必要的mysql查询。AJAX完成后，我会在div id=“container”>中添加一条消息，通知用户成功执行，然后清除内容“container”，以备将来使用；然而，问题就在这里 问题：执行AJAX后，我无法单击已加载到页面（page.php）上的任何HTML链接。我必须刷新网页，以便点击任何链接，并按照他们的目的地。发生这种情况的原因是什么？我如何修复它 AJAX不

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

问题：执行AJAX后，我无法单击已加载到页面（page.php）上的任何HTML链接。我必须刷新网页，以便点击任何链接，并按照他们的目的地。发生这种情况的原因是什么？我如何修复它

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

回答：在AJAX调用导致引导下拉菜单无法正常工作后，没有重新加载DOM。每次调用后，必须手动重新初始化引导下拉类。这一点已经得到了详细的回答

create.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>


$（文档）.ready（函数（）{
$（“#添加#项”）。单击（函数（）{
event.preventDefault（）；
$（“#content”）.load（“form.php”）；
});
});
函数create_item（）{
var form_data=$（“#新项”）.serialize（）；
var请求=$.ajax({
url:“create.php”，
类型：“POST”，
数据：表格数据，
});
request.done（函数（）{
$（“#内容”）.append（“用户添加成功”）；
setTimeout（函数（）{
$（“#内容”）。淡出（“缓慢”）；
}, 5000);
setTimeout（函数（）{
$（“#内容”）.empty（）；
}, 8000);
});
请求失败（函数（jqXHR，textStatus）{
警报（“请求失败：+textStatus”）；
});
}
将
内容淡出
元素后，它将保持隐藏状态。下次调用AJAX函数时，它会将
create.php
加载到一个不可见的元素中

尝试：



其他问题：
应该是
；您没有在脚本顶部包含
jquery.js
；您没有将事件对象
e
传递给
单击处理程序


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>




$（文档）.ready（函数（）{
$（“#添加#项”）。单击（功能（e）{
e、 预防默认值（）；
$（“#content”）.load（“form.php”）；
});
});
函数create_item（）{
var form_data=$（“#新项”）.serialize（）；
var请求=$.ajax({
url:“create.php”，
类型：“POST”，
数据：表格数据，
});
request.done（函数（）{
$（“#内容”）.append（“用户添加成功”）；
setTimeout（函数（）{
$（“#内容”）.fadeOut（“慢”，函数（）{
$（this.empty（）.show（）；
});
}, 5000);
});
请求失败（函数（jqXHR，textStatus）{
警报（“请求失败：+textStatus”）；
});
}

中的锚链接将自然地用新内容“刷新”页面

如果希望通过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>



在AJAX调用之后，没有重新加载DOM。每次调用后，必须手动重新初始化Boostrap下拉模块。详细回答如下：
因为php文件中的onclick是在包含在它存在的dom中之前呈现的，因此它不会在单击时绑定到该函数。
$（“#添加项”）。单击（function（）{
应该是
$（“#添加项”）。单击（function（e）{
因此您可以将事件对象传递给
e.preventDefault
以在@iam decoder上构建dom中创建的项目在创建dom后，您可以在jquery中查找on功能，我相信这取代了jquery live功能，因为它已被弃用。@iam decoder。单击（）函数工作正常。这不是我的问题。onclick函数create_item（）工作。AJAX完成后，
部分中的任何
链接在没有页面刷新的情况下都无法工作。
中只有一个链接我可以看到。其他链接是动态添加的吗？您的建议可以清除
；但是，它不能解决无法单击
的问题de>并按照它的方向进行操作。目前，我完全无法重现您描述的问题。请按照我描述的方式修复代码，然后告诉我们您仍然存在的问题。否则，我将投票以“无法重现”结束此问题Jquery包含在内，但在页面的摘录中被省略。
是一个错误类型，现在正确显示“id”。我理解传递事件处理程序（e）向下，但你能详细说明这将如何影响与此无关的其他链接吗？不，我不能，因为我根本无法再现该问题。你需要向我们提供一个向我们显示错误的链接。感谢你的回复，但这不是关于手头问题的主题。问题不是如何使用AJAX加载内容。问题是一旦使用AJAX命令执行时，页面上的HTML链接不再可单击。例如，单击“添加新项目”表单加载。填写表单并单击按钮提交数据。AJAX完成并将消息附加到div容器。然后容器被清空。当我尝试导航到站点的另一部分时，链接不起作用。

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



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