为什么我的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);
  }
});


  });
});

哪个看起来很直接吧？

然而,在我的控制台中,我看到1次点击后出现2次GET请求.

我的按钮很简单:

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

我错过了什么 - 应该有2个GET请求吗？

是否有机会在加载新文件时再次加载$(document).ready()函数并再次执行click函数？

注意:我不是双击按钮.它可能没关系,但是如果我将它改为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请求的内容...如果click函数只运行一次,那么它可能不是按钮正在执行该函数两次,而是$ .ajax()部分,即成功回调即.我已经更新了JS代码,以显示我是如何构建console.log()的.

最终编辑:

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

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

     // ajax function

  }

我不知道,但是当#shade(我的thickbox)和#booking_box进来因此运行它TWICE时,它正在调用此函数!:(

我觉得这样的工具.

谢谢大家的帮助.

Answer 1

可能会发生一些事情:

1. 点击处理程序已绑定两次.更改$('.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的开发人员工具向点击处理程序添加断点并手动调试.您将能够遍历"调用堆栈"并发现是否是这种情况.

Answer 2

我的函数位于 2 个 div 中，并带有以下 JS

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

 // ajax function

}

我没有意识到，通过这样做，它会在我淡入的每个 div 的函数内部执行 2 次......

解决方案是：

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

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

        // ajax function

     });

});