多個Jquery .delegate（）問題

Question

我有多個jquery委託函數從列表中刪除項目。它們第一次正常工作，但似乎停止對其他刪除功能的刪除功能。

所以我有3個表，可用性，經驗和愛好。如果我點擊從愛好列表中刪除一個項目，它可以工作，並且可以使其他人工作。後來從嗜好中刪除仍然有效。

看着它與螢火蟲，似乎每一次點擊從可用性或經驗刪除條目觸發相同的鏈接，第一次觸發從愛好刪除，就好像它已經保存並不會改變它。

$(document).ready(function() { 
    var i = 1; 
    var pager; 
    var pai; 
    var thetab; 
    $('#tabs-5').delegate('.delav', 'click', function (e) { 
     e.preventDefault(); 
     pager = $(this).attr("href"); 
     $("#dialog2").dialog({ 
      autoOpen: false, 
      width: 600, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        $('#ava_list').html("Loading.."); 

        pai = $('#epa_id').val(); 
        thetab = "availability"; 
        $.get("/_includes/functions.php", { 
         cache: false, 
         table: thetab, 
         pa: pai, 
         delattr: pager 
        }, function (data) { 
         $('#ava_list').html(data); 
        }); 

        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $("#dialog2").dialog("open"); 
    }); 
}); 

$(document).ready(function() { 
    var i = 1; 
    var pager; 
    var pai; 
    var thetab; 
    $('#tabs-3').delegate('.delexp', 'click', function (e) { 
     e.preventDefault(); 
     pager = $(this).attr("href"); 
     $("#dialog2").dialog({ 
      autoOpen: false, 
      width: 600, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        $('#exp_list').html("Loading.."); 

        pai = $('#epa_id').val(); 
        thetab = ""; 
        $.get("/_includes/functions.php?ms=", { 
         cache: false, 
         table: thetab, 
         pa: pai, 
         delattr: pager 
        }, function (data) { 
         $('#exp_list').html(data); 
        }); 

        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $("#dialog2").dialog("open"); 
    }); 
}); 

$(document).ready(function() { 
    var i = 1; 
    var pager; 
    var pai; 
    var thetab; 
    $('#tabs-7').delegate('.delhob', 'click', function (e) { 
     e.preventDefault(); 
     pager = $(this).attr("href"); 
     $("#dialog2").dialog({ 
      autoOpen: false, 
      width: 600, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        $('#hob_list').html("Loading.."); 

        pai = $('#epa_id').val(); 
        thetab = "hobby"; 
        $.get("/_includes/functions.php", { 
         cache: false, 
         table: thetab, 
         pa: pai, 
         delattr: pager 
        }, function (data) { 
         $('#hob_list').html(data); 
        }); 

        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $("#dialog2").dialog("open"); 
    }); 
}); 

Answer 1

我建議首先做以下修改，大幅簡化問題，並使其不太可能是一個對話框可以與他人發生衝突：

1. 擺脫所有重複的代碼，並將所有代碼摺疊爲帶有幾個參數的單個函數調用。
2. 確保您銷燬先前使用的對話框，因此當您創建新對話框時，它將從頭開始創建新數據。

還有幾個問題。什麼是table:,pa:和delattr:屬性在get對象中傳遞給$ .get函數？他們沒有記錄$.get()設置。另外，你的意思是說，所有三個對話框中都有相同的pa: $('#epa_id').val(),行嗎？

下面介紹如何將所有重複代碼合併到一個通用函數中，併爲每個對話使用唯一ID。我也去掉了不需要的局部變量：

$(document).ready(function() { 

    function configureDialogClick(parent, child, list, tab, dialogID) { 
     $(parent).delegate(child, 'click', function (e) { 
      e.preventDefault(); 
      var pager = $(this).attr("href"); 
      $(dialogID).dialog({ 
       autoOpen: false, 
       width: 600, 
       modal: true, 
       buttons: { 
        "Confirm": function() { 
         $(list).html("Loading.."); 

         $.get("/_includes/functions.php", { 
          cache: false, 
          table: tab, 
          pa: $('#epa_id').val(), 
          delattr: pager 
         }, function (data) { 
          $(list).html(data); 
         }); 

         $(this).dialog("close"); 
         $(this).dialog('destroy'); 
        }, 
        "Cancel": function() { 
         $(this).dialog("close"); 
         $(this).dialog('destroy'); 
        } 
       } 
      }); 
      $(dialogID).dialog("open"); 
     }); 
    } 

    configureDialogClick("#tabs-3", ".delexp", "#ava_list", "", "#dialog3"); 
    configureDialogClick("#tabs-5", ".delav", "#hob_list", "availability", "#dialog5"); 
    configureDialogClick("#tabs-7", ".delhob", "#hob_list", "hobby", "#dialog7"); 

}); 

因爲我沒有運行此代碼的方式，我不能說這是否修復該問題，或者它只是在右側的下一個淨化步驟方向。