Позвоните в Аякс после успеха

Question

Я сделал ajax-запрос, чтобы получить название каждой кнопки, которую я нажимаю ... Затем я хочу поместить все в этом URL в "#Container". (URL-адрес определяет страницу с некоторыми кодами).в первый раз ... но в другой раз я должен перезагрузить страницу, чтобы показать мне детали каждой кнопки, и она не показывает мне детали других кнопок, которые нажимали после первой требуемой кнопки ..

$(function () {
  $('button').click(function () {
    var data= $(this).val();
    $.ajax({
      url: '/myurl',
      type: 'post',
      dataType: 'json',
      data: {
        data: data
      },
      success: function (data) {
        $('#container').html(data);
      }
    });
  });
});

Что мне делать?Есть ли что-то, препятствующее запуску ajax в следующий раз?

Answer 1

Вам потребуется повторно связать событие ajax из-за его повторного рендеринга DOM после завершения запроса ajax. Все эти элементы в #container не являются виртуальной частью DOM, и ваше событие click работает только для уже существующих элементов.

Попробуйте это

Обернуть событие ajax в отдельную функцию

function ajaxEvent(data){
 $.ajax({
    url: '/myurl',
    type: 'post',
    dataType: 'json',
    data: {data: data},
    success: function (data) {
      $('#container').html(data);
      clickEvent(); //note this function attachment I added below
    }
 });
}

Вы можете перенести событие клика в функцию

function clickEvent(){
  $('button').off('click');
  $('button').on('click',function(){
     ajaxEvent($(this).val());
  });
}

Теперь JS выглядит как

<script>

$(function(){
  clickEvent();
});

function ajaxEvent(data){
 $.ajax({
    url: '/myurl',
    type: 'post',
    dataType: 'json',
    data: {data: data},
    success: function (data) {
      $('#container').html(data);
    }
 });
}

function clickEvent(){
  $('button').off('click');
  $('button').on('click',function(){
     ajaxEvent($(this).val());
  });
}

</script>

Также я вижу, что вы передаете ajax-данные как $('button').val(), что неверно. Используйте тип ввода текста, если вы хотите отправить данные на сервер.

Answer 2

Попробуйте с $ (document) .on ('click', вместо $ ('button'). Click как показано ниже

$(function () {
  $(document).on('click','button',function () {    
  var data= $(this).val();
  alert(data);
  $.ajax({
    url: '/myurl',
    type: 'post',
    dataType: 'json',
    data: {data: data},
    success: function (data) {
      $('#container').html(data);}
    });
  });
});