Javascript jquery不起作用的嵌套ajax调用_Javascript_Php_Jquery_Ajax

Javascript jquery不起作用的嵌套ajax调用

javascript php jquery ajax

Javascript jquery不起作用的嵌套ajax调用,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我想用“按钮二”替换“按钮一”，然后用“按钮三”替换“按钮二”，然后用“按钮确定”替换“按钮三”，并使用jquery进行嵌套ajax调用。但在用按钮二替换按钮一后，它就不起作用了。我错在哪里？请帮忙  <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.

我想用“按钮二”替换“按钮一”，然后用“按钮三”替换“按钮二”，然后用“按钮确定”替换“按钮三”，并使用jquery进行嵌套ajax调用。但在用按钮二替换按钮一后，它就不起作用了。我错在哪里？请帮忙

<!--This is my html code.......-->
<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 </head>
 <body>
    <button id="one">button one</button>
    <script>
        $(document).ready(function(){
            $("#one").click(function(){
                $.post("show.php",
                {
                    id: "two"
                },
                function(data,status){
                    document.getElementById("one").innerHTML = data;
                });
            });
            $("#two").click(function(){
                $.post("show.php",
                {
                    id: "three"
                },
                function(data,status){
                    document.getElementById("one").innerHTML = data;
                });
            });
            $("#three").click(function(){
                $.post("show.php",
                {
                    id: "ok"
                },
                function(data,status){
                    document.getElementById("one").innerHTML = data;
                });
            });
        });
    </script>
</body>
</html>


按钮一
$（文档）.ready（函数（）{
$（“#一”）。单击（函数（）{
$.post（“show.php”，
{
id:“两个”
},
功能（数据、状态）{
document.getElementById（“一”）.innerHTML=数据；
});
});
$（“#2”）。单击（函数（）{
$.post（“show.php”，
{
id:“三个”
},
功能（数据、状态）{
document.getElementById（“一”）.innerHTML=数据；
});
});
$（“#三”）。单击（函数（）{
$.post（“show.php”，
{
id:“好的”
},
功能（数据、状态）{
document.getElementById（“一”）.innerHTML=数据；
});
});
});

这是show.php页面代码

<?php
$id=$_REQUEST["id"];
echo"
    <button id='$id'>button $id</button>
";
?>

我认为您的代码是正确的，但是一旦您动态地从新的html替换了以前的html，即使是在开始时注册的点击也是无用的。在这种情况下，您应该使用事件委派。请看这个

并将其用作单击事件：：
$( "parent_element" ).on( "click", "updated_child_element", function( event ) {
    //do something
});

两个问题：
在按钮上设置innerHTML
会更改按钮的内容，但不会替换按钮。你不能把一个按钮放在另一个按钮里面；（允许在其中包含的内容）是“但不能有后代”，当然，按钮是交互式内容。您需要$（“#原始按钮”）.replacetwith（newContent）

后续按钮的事件处理程序永远不会连接，因为您试图在它们存在之前连接它们。请考虑改用事件委派
见评论：

$（文档）.ready（函数（）{
//注意活动代表团
$（文档）。在（“单击”，“一”，函数（）上）{
//模拟ajax的超时
setTimeout（函数（）{
$（“#一”）。替换为（'按钮二'）；
}, 100);
});
$（文档）。在（“单击”上，“#二”，函数（）{
//模拟ajax的超时
setTimeout（函数（）{
$（“#二”）。替换为（'按钮三'）；
}, 100);
});
$（文档）。在（“单击”，“三”，函数（）上）{
//模拟ajax的超时
setTimeout（函数（）{
$（“#三”）。替换为（'Button OK'）；
}, 100);
});
});
按钮一
从技术上讲，Ajax调用不是嵌套的。只是单独打电话。总体目标是什么？您需要在添加按钮后添加点击。或者做一个$（'body'）。在（'click'，'#two'，function（）{}）
为什么它不工作。我是否做错了@gonecoding第一次单击后，您应该查看DOM：您正在嵌套按钮
元素，而不是替换它们。要将事件绑定到页面加载中尚不存在的元素，您需要事件委派。我正在构建一个网站。当我单击filter时，它会显示产品以及分页（filter和分页都在ajax上工作）。但当我点击任何分页时，它都不起作用。所以我用这些代码进行测试，这些代码也不起作用。。。。任何建议@gonecoding这是问题的一部分，是的，但不是全部。问题已通过替换$（文档）解决。在（“单击”、“#one”，function（）{//code}
和您的代码。@Hemant Manwani…感谢您的帮助help@Harshanil将答案标记为已接受，表明它解决了您的问题/