Question

我在类中有几个元素，它们附加了一个click事件。这会调用一个带有链接的弹出框。该链接进行AJAX调用以将原始元素id存储在数据库中。

问题是，如果你在一个元素上打开弹出窗口并关闭它然后在另一个元素上执行相同的操作，它将进行两个单独的AJAX调用。当点击链接隐藏弹出窗口时，我需要一种方法来退出被调用的原始函数。这样，它一次不会进行多个AJAX调用。

以下是我的问题的基本示例：

$(".ulElement").live('click', function(){
    $('#popup').css('visibility','visible');
    var elementNum = $(this).parent().attr('id');
    $('#popupLink1').click((function () { 
        //make Ajax call and send elementNum
    });
    $('#popopLink2').click((function () {
         $('#popup').css('visibility','hidden');
         //I need to exit the function that was called by ulElement here
    });

编辑：这是我简化的代码，我需要工作。现在，它仍然会将我点击的每个元素都变为灰色。

$(".position").live('click', function(event){
    $('#seatmenu').css('visibility','visible');
    var seatnum = $(this).parent().attr('id');

    $('.stand').css('visibility', 'visible');
    $(".menuhead").click(function(){
        clearMenu();               //this just hides the menu
        event.preventDefault();
    });


    $(".stand").click(function(){
        clearMenu();
        $('#'+seatnum).css('color','grey');
    });
});

Answer 1

试试这个：

http://api.jquery.com/event.preventDefault/

Answer 2

正如Orbling所说，一旦完成，你就无法取消AJAX通话。如果您想要阻止用户多次调用AJAX服务，您只需存储一个变量来记录用户是否通过声明全局变量来单击它。例如

var hasUserClickedPopup = false;

$(".ulElement").live('click', function(){
    $('#popup').css('visibility','visible');
    var elementNum = $(this).parent().attr('id');
    $('#popupLink1').click((function () { 
        if(!hasUserClickedPopup )
         {
           //make Ajax call and send elementNum
           hasUserClickedPopup  = true;
          }
    });
    $('#popopLink2').click((function () {
         $('#popup').css('visibility','hidden');
         //I need to exit the function that was called by ulElement here
    });

Answer 3

您实际上可以中止现有的XHR呼叫。

只需将$.ajax调用存储在变量中，该变量可以在顶部声明。然后，您可以在提出其他请求之前将其取消。

即

var xhr;
$('.button1").click(function() {
    if(xhr == null) {
        xhr = $.ajax(...);
    }
    else {
        xhr.abort();
    }

});

$(".button2").click(function() {
    if(xhr == null) {
        xhr = $.ajax(...);
    }
    else {
        xhr.abort();
    }
});

退出嵌套函数

3 个答案: