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进来因此运行它时，它正在调用此函数！：（

我觉得这样的工具。

感谢大家的帮助。

Answer 1

可能会发生一些事情：

点击处理程序已绑定两次。将$('.book_now').click(function(){更改为$('.book_now').unbind('click').click(function(){进行调试。稍后，您可以重构代码以使用$('.book_now').unbind('click',handler).click(handler);。
服务器端出现重定向，导致出现两次ajax请求。这意味着console.log('inside')只会运行一次。
点击处理程序被触发两次。要对此进行调试，请通过firebug或webkit的开发人员工具向点击处理程序添加断点并手动调试。您将能够遍历“调用堆栈”并发现是否是这种情况。

Answer 2

我的功能在2个div中，并带有以下JS

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

 // ajax function

}

我没有意识到，通过这样做，它会在函数内部执行2次，因为我正在逐渐消失...

解决方案是：

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

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

        // ajax function

     });

});

Answer 3

请从您的代码中删除document.ready。使用简单的功能：

$('.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);
    }
  });
});

Answer 4

也许有人可以从我的经历中受益。

这是我得到的地方：

SCRIPT
    function someFunction(){
      $("#item").change(function(){
        // Function with Ajax Request
      }
    }

SELECT
onchange="someFunction()"

并且引起了我很多要求。为了解决这个问题，我删除了$("#item").change(function(){}，同时只留下了代码

Answer 5

将您的class属性更改为id，它将不再执行此操作。这是怎么解决的。

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

5 个答案: