jqueryがネストされたajaxコール

-2

jqueryを使用してネストされたajax呼び出しで 'button one'を 'button two'、 'button two'を 'button three'、 'button three'を 'button ok'と置き換えたい。ボタン1をボタン2に置き換えた後は機能しません。どこが間違っていますか？助けてください。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>

これはshow.phpページコード

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

出典

2016-12-09 Harshanil

はい、その可能 – Bharat

技術的にはあなたのAjax呼び出しが* *ネストされていません。ちょうど別々に呼ばれた全体の目的は何ですか？ –

ボタンを追加した後でオンクリックを追加する必要があります。または、$（ 'body'）を実行してください。 'click'、 '#two'、function（）{'） – Timmetje

である私はあなたのコードが正しいと思うが、あなたが動的に新しいものから前のhtmlを交換後、でも起動時に登録されたクリックは無用です。この場合、イベントの委任を使用する必要があります。これを読んで下さい。

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

そして::クリックイベントとして

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

出典

2016-12-09 10:11:58

これは問題の*一部*ですが、すべてではありません。 –

問題を解決するには、 '$（document）.on（" click "、" #one "、function（）{// code}'をコードに置き換えて@Hemant Manwani ...助けてくれてありがとう – Harshanil

2つの問題にこれを使用します。ボタンをinnerHTMLを設定

は、ボタンの内容を変更し、ボタンに取って代わるものではありません。別のボタンの中にボタンを置くことはできません。 content model for button（内部に許可されているもの）は"Phrasing contentですが、interactive content子孫でなければなりません"、もちろんbuttonはインタラクティブコンテンツです。あなたが欲しい$("#originalbutton").replaceWith(newContent);
あなたが存在する前にそれらを接続しようとしているので、後続のボタンのためのあなたのイベントハンドラは決して繋がりません。代わりに、イベント委任を使用してください。

参照してくださいコメント：

$(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); 
 
    }); 
 
});

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

出典

2016-12-09 10:17:24

これは動作しています。 ...ありがとうございました – Harshanil

@ Harshanil答えがあなたの問題を解決したことを示すためにマークする/ – Nope

jqueryがネストされたajaxコール

答えて

関連する問題