Question

我正在使用Ajax将数据数组添加到数据库中。

当点击“#bookingbutton”时，返回带有“.select-room-button”按钮的HTML块。

我在“#bookingbutton”的原始Ajax调用的成功函数中添加了“.select-room-button”代码，否则它不起作用。

我希望能够无限次点击“.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

您可以尝试在文档中使用.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 2

为此，您可以为单个事件使用各种选择器来触发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 3

您可以进行这些更改

使用$(document).ready(function()代替jQuery(document).ready(function($)
使用$('body').on('click', '.select-room-button', function()代替$('.select-room-button').click(function()并将其$('#bookingbutton').click(function()

重复jQuery Ajax成功函数

3 个答案: