Вложенный вызов ajax с jquery не работает

-2

Я хочу заменить 'button one' на 'button two', затем 'button two' с кнопкой «three» и «button three» с кнопкой «ok» с вложенным вызовом ajax с использованием jquery. Но после замены кнопки один на кнопку два она не работает. Где я ошибаюсь? Пожалуйста помоги.Вложенный вызов ajax с jquery не работает

<!--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'). On ('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

две проблемы:

Установка innerHTML на кнопку изменяет содержание кнопки, он не заменяет кнопку. У вас не может быть кнопки внутри другой кнопки; content model for button (то, что разрешено иметь внутри) «Phrasing content, но не должно быть interactive content потомок» и, конечно же, button s - интерактивный контент. Вы хотите $("#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

@ Харшанил Отметьте ответ как принятый, чтобы указать, что он решил вашу проблему / – Nope

Вложенный вызов ajax с jquery не работает

ответ

Смежные вопросы