重复 jQuery Ajax 成功函数答案

【问题标题】：Repeating jQuery Ajax success function重复 jQuery Ajax 成功函数
【发布时间】：2015-10-14 16:31:32
【问题描述】：

我正在使用 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);

                    }
                });

            });

        }
    });

});

});

【问题讨论】：

可能是$(document).on("click","#bookingbutton, .select-room-button").click(function()?

标签： javascript jquery ajax

【解决方案1】：

为此，您可以为单个事件使用各种选择器来触发 ajax 调用。所以你的代码 sn-p 看起来像

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

        }
      });

    });
});

【讨论】：

【解决方案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);

     });

  });
});

【讨论】：

【解决方案3】：

您可以进行这些更改

使用$(document).ready(function() 而不是jQuery(document).ready(function($)
使用$('body').on('click', '.select-room-button', function() 而不是$('.select-room-button').click(function() 并把它拿出来$('#bookingbutton').click(function()

【讨论】：