jquery live（）追加點擊事件導致多次點擊

Question

我有一些奇怪的行爲與我的asp.net MVC3應用程序中的jQuery ajax功能。

我有幾個數據框，每個數據框都包含一個鏈接來打開彈出框並更改每個框中的數據。爲此，我添加了一個jquery live() click事件來通過jQuery ajax調用來處理數據。在ajax調用的「成功」方法中，我獲取返回數據並打開包含單選按鈕列表的UI對話框彈出窗口（局部視圖）。我選擇一個不同的單選按鈕並按'關閉' - 關閉按鈕觸發另一個點擊事件，通過ajax調用新數據來處理新數據，該數據刷新主頁面框中的數據。

這完美的第一次。如果您再點擊一次來更改它，彈出窗口會打開，允許您選擇一個新值，但是這次按下彈出窗口上的關閉會觸發兩個點擊事件，這些事件會在我的MVC控制器中引發一個空錯誤。

如果您重複此過程，它會觸發3個點擊事件，因此很顯然live()正在某處添加這些事件。

我使用on()和click()試過，但網頁本身是由通過AJAX加載面板，所以我用live()自動綁定的事件。

這裏是我使用的代碼：

HTML

<p><!--Data to update goes here--></p> 
<a href="#" class="adjust">Update Data</a> 

首先點擊事件調用彈出與局部視圖

$('a.adjust').live('click', function (e) { 
    var jsonData = getJsonString(n[1]); 
    var url = '@Url.Action("ChangeOptions", "Search")'; 
    var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body'); 
    // load the data via ajax 
    $.ajax({ 
     url: url, 
     type: 'POST', 
     cache: false, 
     contentType: "application/json; charset=utf-8", 
     data: jsonData, 
     success: function (response) { 
      dialog.html(response); 
      dialog.dialog({ 
       bgiframe: true, 
       modal: true 
       } 
      }); 
     } 
    }); 
    e.preventDefault(); 
}); 

第二次點擊事件發生的新的信息返回更新的局部視圖

$('a#close').live('click', function (event) { 
    var jsonData = getJsonString(n[1]); 
    var url = '@Url.Action("GetChangeInfo", "Search")'; 
    $.ajax({ 
     url: url, 
     type: 'POST', 
     contentType: "application/json; charset=utf-8", 
     data: jsonData, 
     success: function (response) { 
      $('#box-' + @column).html(response); //this refreshes the box on the main page 
     }, 
     error: function() { 
     } 
    }); 
    $('#ModalDialog').dialog('close'); 
    event.preventDefault(); 
}); 

有人知道這裏可能發生了什麼，我該如何解決？

Answer 1

使用命名空間取消綁定先前點擊結合這樣的：

$('a.adjust').unbind('click.adjustclick'); 

然後綁定的點擊動作a.adjust：

$('a.adjust').bind('click.adjustclick', function(){ 

    //your code here 

    //note the return false, this prevents the browser from visiting the URL in the href attribute 
    return false; 
}); 

如果我正確理解你，當你關閉對話框時，你嘗試運行第二個點擊動作。如果您使用的是自己的按鈕＃接近，click事件綁定到其關閉對話框

$('a.adjust').bind('click.adjustclick', function(){ 
    var jsonData = getJsonString(n[1]); 
    var url = '@Url.Action("ChangeOptions", "Search")'; 
    var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body'); 
    // load the data via ajax 

    $.ajax({ 
     url: url, 
     type: 'POST', 
     cache: false, 
     contentType: "application/json; charset=utf-8", 
     data: jsonData, 
     success: function (response) { 
      dialog.html(response); 
      dialog.dialog({ 
       bgiframe: true, 
       modal: true, 
       close: function(){ 
        var jsonData2 = getJsonString(n[1]); 
        var url2 = '@Url.Action("GetChangeInfo", "Search")'; 

        $.ajax({ 
         url: url2, 
         type: 'POST', 
         contentType: "application/json; charset=utf-8", 
         data: jsonData2, 
         success: function (response2) { 
          $('#box-' + @column).html(response2); //this refreshes the box on the main page 
         }, 
         error: function() { 
         } 
        }); 
        } 
       } 
      }); 
     } 
    }); 
}); 

，它會自動閃光收盤：爲此我會用建立密切功能的對話框這樣功能的對話框。

$('a#close').unbind('click.closedialog'); 
$('a#close').bind('click.closedialog', function() { 
    $('#ModalDialog').dialog('close'); 
    return false; 
} 

Answer 2

試試這個：

$('a#close').unbind('click').bind('click', function (event) { 
//Your Code 
});