Повторение jQuery Функция успеха Ajax

Question

Я использую Ajax для добавления массива данных в базу данных.

В настоящее время при нажатии на кнопку «# bookingbutton» возвращается блок HTML с кнопкой «.select-room-button».

Я добавил код «.select-room-button» в функции успеха оригинального вызова Ajax для «#bookingbutton», иначе это не сработает.

Я хочу, чтобы иметь возможность нажимать кнопку «.select-room-button» неограниченное количество раз, не повторяя загрузки кода раз в каждой успешной функции, если это имеет смысл? Я чувствую, что должен быть более умный способ сделать это, но я не уверен, как это сделать?

jQuery(document).ready(function($) { 

$('#bookingbutton').click(function() { 

    $('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 
    $('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 

    $.ajax({ 
     type: 'POST', 
     url: AJAX_URL, 
     data: $('#bookroom').serialize(), 
     dataType: 'json', 
     success: function(response) { 

      if (response.status == 'success') { 
       $('#bookroom')[0].reset(); 
      } 

      $('.booking-main').html(response.content); 
      $('.booking-side-response').html(response.sidebar); 


      $('.select-room-button').click(function() { 

       $('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 
       $('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 

       $.ajax({ 
        type: 'POST', 
        url: AJAX_URL, 
        data: $('#bookroom').serialize(), 
        dataType: 'json', 
        success: function(response) { 
         if (response.status == 'success') { 
          $('#bookroom')[0].reset(); 
         } 

         $('.booking-main').html(response.content); 
         $('.booking-side-response').html(response.sidebar); 

        } 
       }); 

      }); 

     } 
    }); 

}); 

});

Answer 1

Для этого можно использовать различные селектор для одно событие для запуска вызовов ajax. Таким образом, ваш фрагмент кода будет выглядеть

jQuery(document).ready(function($) { 

$(document).on("click",'#bookingbutton, .select-room-button', function() { 

$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 

$.ajax({ 
    type: 'POST', 
    url: AJAX_URL, 
    data: $('#bookroom').serialize(), 
    dataType: 'json', 
    success: function(response) { 

       if (response.status == 'success') { 
        $('#bookroom')[0].reset(); 
       } 

       $('.booking-main').html(response.content); 
       $('.booking-side-response').html(response.sidebar); 

     } 
     }); 

    }); 
}); 

Answer 2

Вы можете попробовать использовать .on вот так на документе. Он также свяжет события для динамически генерируемого HTML.

jQuery(document).ready(function($) { 

    $(document).on("click",'#bookingbutton, .select-room-button').click(function() { 

     $('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 
     $('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 

     $.ajax({ 
     type: 'POST', 
     url: AJAX_URL, 
     data: $('#bookroom').serialize(), 
     dataType: 'json', 
     success: function(response) { 

      if (response.status == 'success') { 
      $('#bookroom')[0].reset(); 
      } 

     $('.booking-main').html(response.content); 
     $('.booking-side-response').html(response.sidebar); 

    }); 

    }); 
}); 

Answer 3

Вы можете сделать это изменить

• использование $(document).ready(function() вместо jQuery(document).ready(function($)
• использования $('body').on('click', '.select-room-button', function() вместо $('.select-room-button').click(function() и получить его $('#bookingbutton').click(function()