php - 为什么我的 jquery ajax 请求执行了多次？

Question

当我单击执行 ajax 请求的函数时，我正在查看 firebug 中的控制台。问题是，单击一个按钮应该发送 1 个 ajax 请求，但我收到了 2 个请求!

我的 js 代码如下所示:

$(document).ready(function() {
   $('.book_now').click(function(){


$.ajax({
  type: 'POST',
  url: '/booking.php',
  data: 'event_id='+event_id+'&time_id='+time_id,
  success: function(data) {
    console.log('inside');
    $('#booking_box_content').html(data);
  }
});


  });
});

哪个看起来很简单，对吧？

然而，在我的控制台中，我看到 2 x GET 请求关闭 1 次点击。

我的按钮很简单:

<div class="book_now"></div>

我是否遗漏了什么 - 是否应该有 2 个 GET 请求？

是否有可能在加载新文件时再次加载 $(document).ready() 函数并因此再次执行点击函数？

注意:我没有双击按钮。这可能无关紧要，但如果我将其更改为 POST，它也会执行两次。

编辑:booking.php 的响应

<div id="booking_box_left">
  <h1 class="speaker_name"></h1>
  <h1 class="event_name"></h1>

  <div class="event_start_header">Start</div><div id="event_start_datetime">, </div>
  <div class="cleared"></div>
  <div class="event_end_header">End</div><div id="event_end_datetime">, </div>
  <div class="cleared"></div>
  <div class="event_where_header">Where</div><div id="event_where"><strong></strong><br /><br />
</div>

</div>
<div id="booking_box_right_container">
  <form id="booking_form_1" method="post">
    <input type="hidden" name="booking_id" value="7a614fd06c325499f1680b9896beedeb" />
    <input type="hidden" name="event_id" value="" />
    <input type="hidden" name="time_id" value="" />
    <div id="booking_box_right">
      <h1>To reserve your seat</h1>
      <input type="text" name="booking_email" class="enterSomething booking_email" title="Enter your email..." />
      <div class="booking_email_helper">On clicking next a ticket will be held for you for a short period for you to complete your registration.</div>
      <input type="submit" id="next" value="Next" />
    </div>
  </form>
</div>

注意:据我所知，此响应中没有任何功能被触发。我怀疑响应是什么触发了 ajax 请求两次......如果点击功能只运行一次，那么它不可能是按钮执行了两次功能，但是 $.ajax()部分，即成功回调。我更新了 JS 代码以展示我是如何构造 console.log() 的。

最终编辑:

我的 ajax 函数包含在以下内容中:

   $('#shade, #booking_box').fadeIn(function(){

     // ajax function

  }

我不知道，但是当#shade(我的 thickbox)和#booking_box 出现时，它调用了这个函数，因此运行了两次! :(

我感觉就是这样一个工具。

感谢大家的帮助。

Answer 1

可能会发生一些事情:

1. 点击处理程序已绑定(bind)两次。将 $('.book_now').click(function(){ 更改为 $('.book_now').unbind('click').click(function(){ > 进行调试。稍后您可以重构代码以使用 $('.book_now').unbind('click',handler).click(handler);。

2. 服务器端发生重定向，导致看起来好像执行了两个 ajax 请求。这意味着 console.log('inside') 只会运行一次。

3. 点击处理程序被触发了两次。要对此进行调试，请通过 firebug 或 webkit 的开发人员工具向您的点击处理程序添加一个断点，然后手动对其进行调试。您将能够向上遍历“调用堆栈”并发现是否属于这种情况。