Tại sao yêu cầu jquery ajax của tôi lại hoạt động nhiều lần?

Question

Tôi đang xem bảng điều khiển trong firebug khi tôi nhấp vào một hàm thực hiện yêu cầu ajax. Vấn đề là, một cú nhấp chuột của một nút sẽ gửi 1 yêu cầu ajax, nhưng tôi nhận được 2 yêu cầu được gửi!

Mã này cho js của tôi trông như thế này:

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


    }); 
}); 

Mà dường như khá thẳng về phía trước phải không?

Tuy nhiên, trong bảng điều khiển của tôi, tôi thấy 2 x yêu cầu TẮT 1 lần nhấp.

nút My chỉ đơn giản là:

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

Am tôi thiếu một cái gì đó - là có nghĩa vụ phải được 2 yêu cầu GET?

Có phải do bất kỳ cơ hội nào tải lại hàm $ (document) .ready() khi tệp mới được tải và có thực thi lại chức năng nhấp không?

Lưu ý: Tôi không nhấp đúp vào nút. Nó có lẽ không quan trọng, nhưng nếu tôi thay đổi nó thành POST nó cũng làm hai lần.

Edit: các phản hồi từ 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> 

Lưu ý: không có gì để phản ứng này có bất kỳ chức năng được kích hoạt để kiến ​​thức của tôi. Tôi nghi ngờ rằng phản ứng là những gì đang bắn ra yêu cầu ajax hai lần ... nếu chức năng bấm chỉ chạy một lần, thì nó không thể là nút đang thực thi hàm hai lần, nhưng $ .ajax() một phần, cụ thể là sự gọi lại thành công. Tôi đã cập nhật mã JS để hiển thị cách cấu trúc giao diện console.log().

CUỐI CÙNG EDIT:

chức năng ajax của tôi đã được bao bọc bên trong những điều sau đây:

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

    // ajax function 

    } 

tôi không có ý tưởng nhưng nó đã được gọi chức năng này cho cho khi #shade (thickbox của tôi) và #booking_box xuất hiện do đó chạy nó HAI lần! :(

tôi cảm thấy giống như một công cụ như vậy

Cảm ơn tất cả mọi người giúp đỡ của bạn

Answer 1

Tôi có chức năng của tôi trong 2 divs với những điều sau JS

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

// ajax function 

} 

Tôi đã không nhận ra rằng bằng cách làm này nó sẽ thực hiện bên trong hàm 2 lần cho mỗi div Tôi đã mờ dần trong. ..

giải pháp là:

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

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

     // ajax function 

    }); 

}); 

Answer 2

Một số điều có thể xảy ra:...

1. Việc xử lý nhấp chuột đã được binded hai lần thay đổi $('.book_now').click(function(){ đến $('.book_now').unbind('click').click(function(){ để gỡ lỗi. Sau đó, bạn có thể cấu trúc lại mã của mình để sử dụng $('.book_now').unbind('click',handler).click(handler);.

2. Có một chuyển hướng xảy ra ở phía máy chủ khiến cho nó xuất hiện như thể có hai yêu cầu ajax được thực hiện. Điều này có nghĩa là console.log('inside') sẽ chỉ chạy một lần.

3. Trình xử lý nhấp chuột đang được kích hoạt hai lần. Để gỡ lỗi này, hãy thêm điểm ngắt vào trình xử lý nhấp chuột của bạn thông qua công cụ phát triển của firebug hoặc webkit và gỡ lỗi thủ công. Bạn sẽ có thể duyệt qua "ngăn xếp cuộc gọi" và khám phá xem đây có phải là trường hợp không.

Answer 3

Hãy loại bỏ document.ready từ mã của bạn. Sử dụng chức năng đơn giản:

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

Có thể ai đó có thể hưởng lợi từ trải nghiệm của tôi.

Đây là nơi mà tôi nhận:

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

 
SELECT 
onchange="someFunction()" 

Và đã gây cho tôi rất nhiều yêu cầu. Để khắc phục sự cố, tôi đã xóa $("#item").change(function(){} trong khi chỉ để lại mã bên trong của nó

Answer 5

Thay đổi thuộc tính lớp thành id và nó sẽ không làm điều đó nữa. Đây là cách có xung quanh nó.