Question

我想用“按钮2”替换“按钮1”，然后用“按钮3”替换“按钮2”，然后使用“按钮确定”将“按钮3”替换为“按钮3”，使用jquery嵌套ajax调用。但是在用按钮2替换按钮1之后它不起作用。我哪里错了？请帮忙。

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

这是show.php页面代码

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

Answer 1

两个问题：

在按钮上设置innerHTML会更改按钮的内容，它不会替换该按钮。你不能在另一个按钮内有一个按钮; content model for button（其中允许包含的内容）是＆＃34; Phrasing content，但必须没有interactive content后代＆＃34; 当然，button是互动内容。您想要$("#originalbutton").replaceWith(newContent);
后续按钮的事件处理程序永远不会被连接，因为您在它们存在之前尝试将它们连接起来。请改为使用事件委派。

见评论：

＆＃13;

$(document).ready(function() {
  // Note event delegation
  $(document).on("click", "#one", function() {
    // timeout to simulate ajax
    setTimeout(function() {
        $("#one").replaceWith('<button id="two">Button Two</button>');
    }, 100);
  });
  $(document).on("click", "#two", function() {
    // timeout to simulate ajax
    setTimeout(function() {
        $("#two").replaceWith('<button id="three">Button Three</button>');
    }, 100);
  });
  $(document).on("click", "#three", function() {
    // timeout to simulate ajax
    setTimeout(function() {
        $("#three").replaceWith('<button id="ok">Button OK</button>');
    }, 100);
  });
});

＆＃13;

<button id="one">Button One</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

我认为你的代码是正确的，但是一旦你动态地从新的html中替换了以前的html，在开始时注册的单击甚至是无用的。在这种情况下，您应该使用事件委托。请阅读本文。

https://learn.jquery.com/events/event-delegation/

并将其用作点击事件::

$( "parent_element" ).on( "click", "updated_child_element", function( event ) {
    //do something
});

嵌套的ajax调用jquery无法正常工作

2 个答案: