Repeating jQuery Ajax success function

Question

I'm using Ajax to add an array of data to a database.

Currently when "#bookingbutton" is clicked on this returns a block of HTML with ".select-room-button" button.

I've added the ".select-room-button" code in the success function of the original Ajax call for "#bookingbutton" otherwise it doesn't work.

I want to be able to click on the ".select-room-button" unlimited times without having to repeat the code loads of times in each success function if that makes sense? I feel like there must be a smarter way to do this but I'm not sure how?

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

For this you can use various selector for a single event to trigger ajax calls. So your code snippet will look like

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

You can try using .on like this on the document. It will bind events for dynamically generated HTML too.

  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);

     });

  });
});