ネストされた関数の終了

Question

クラスには、クリックイベントがアタッチされている要素がいくつかあります。これはリンクが付いたポップアップボックスを呼び出します。このリンクは、元の要素idをデータベースに格納するAJAX呼び出しを行います。

問題は、ある要素にポップアップを開いて閉じ、別の要素で同じことをすると、2つの別々の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 
    }); 

EDITは：これは私が働く必要が簡略化され、私のコードです

以下は私の問題の基本的な例です。今、それはまだ私がクリックしたすべての要素を灰色に変えます。

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