JQuery Coldfusion動態排序HyperLink問題

Question

鑑於我正在開發的項目的性質，我試圖避免使用插件進行可伸縮性。但是，如果事實證明插件是需要的，我願意提供建議。

首先，我在jQuery分頁腳本中取得了成功，使用預定義的（在我的coldfusion腳本中）類「loadLink」的超鏈接，我可以在一個新的頁面中生成10行數據表格被處理並顯示在div標籤內。另外，我可以通過單擊我想要排序的標題之一來重新對該分頁的記錄表中​​的數據進行排序。就像頁面鏈接一樣，它將ajax調用發送到CF組件，該組件會完整地重新生成新的排序表。

所有的工作正常，但這裏是我遇到了一個大問題。每次我選擇一個新的記錄頁面查看時，我仍然可以執行一種新的數據。但是，當我嘗試做第二種任何列時，腳本會自動重新加載，而不是再次發出ajax調用。實質上，點擊功能不會打開，即使我認爲我已經打開了它。我知道我失去了一些東西，但這裏是我使用的代碼：缺少什麼我在這裏

$(document).ready(function() { 
// load the first page of records upon initial load. 
$("##mydiv").load("generateInfo.cfc?method=getEmailData", function() { 
    $(".sortLink").on("click", function(e) { 
     e.preventDefault(); 
     var recorddata = $(this).attr("href").substring(1); //trim '?' char 
     $.ajax({ 
      type: "GET", 
      url: "generateInfo.cfc?method=getEmailData", 
      data: recorddata, 
      dataType: "html", 
      success: function(message) {        
       $("##mydiv").html(message); 
      } 
     }); 
    }); 
}); 

$(".loadLink").click(function(e) { 
    e.preventDefault(); 
    var recorddata = $(this).attr("href").substring(1); //trim '?' char 
    var curElement = $(this); 
    if ($(this).attr("id") != "disabledLink") { 
     $.ajax({ 
      type: "GET", 
      url: "generateInfo.cfc?method=getEmailData", 
      data: recorddata, 
      dataType: "html", 
      success: function(message) { 
       $('##pageLinks').children('a').each(function() { 
        if ($(this).attr("id") == "disabledLink") { 
         $(this).removeAttr("disabled"); 
         $(this).removeAttr("id"); 
        } 
       }); 
       curElement.attr("disabled","disabled"); 
       curElement.attr("id","disabledLink"); 
       $("##mydiv").html(message); 
       $(".sortLink").on("click", function(e) { 
        e.preventDefault(); 
        alert($(this).attr("class")); 
        var recorddata = $(this).attr("href").substring(1); //trim '?' char 
        $.ajax({ 
         type: "GET", 
         url: "generateInfo.cfc?method=getEmailData", 
         data: recorddata, 
         dataType: "html", 
         success: function(message) {        
          $("##mydiv").html(message); 
          $(".sortLink").on("click"); 
         } 
        }); 
       }); 
      } 
     }); 
    } 
}); 
}); 

或者什麼別的，我需要做的就是各種各樣的，不斷在Ajax格式的工作？

Answer 1

我想你可以通過委派事件簡化您的代碼位：

$(document).ready(function() { 
    // cache mydiv location 
    var $mydiv = $("##mydiv"); 
    $mydiv.on("click",".sortLink",function(e){ 
     e.preventDefault(); 
     // split on ? instead to avoid an IE issue on dynaimcally created anchors. 
     var recorddata = $(this).attr("href").split("?")[1]; //trim '?' char 
     $.ajax({ 
      type: "GET", 
      url: "generateInfo.cfc?method=getEmailData", 
      data: recorddata, 
      dataType: "html", 
      success: function(message) { 
       $mydiv.html(message); 
      } 
     }); 
    }).on("click",".loadLink",function(e){ 
     e.preventDefault(); 
     // split on ? instead to avoid an IE issue on dynaimcally created anchors. 
     var recorddata = $(this).attr("href").split("?")[1]; 
     var curElement = $(this); 
     if ($(this).attr("id") != "disabledLink") { 
      $.ajax({ 
       type: "GET", 
       url: "generateInfo.cfc?method=getEmailData", 
       data: recorddata, 
       dataType: "html", 
       success: function(message) { 
        $('##pageLinks').children('a').each(function() { 
         if ($(this).attr("id") == "disabledLink") { 
          $(this).removeAttr("disabled"); 
          $(this).removeAttr("id"); 
         } 
        }); 
        curElement.attr("disabled", "disabled"); 
        curElement.attr("id", "disabledLink"); 
        $mydiv.html(message); 
       } 
      }); 
     } 
    }); 

    // load the first page of records upon initial load. 
    $("##mydiv").load("generateInfo.cfc?method=getEmailData"); 

}); 

這將確保你的事件總是綁定在阿賈克斯打造DOM節點。

至於我的recorddata所做的更改，在IE中，如果動態加載後添加錨標記，它將包含完整路徑位置，而不是你給它的路徑。所以，如果你設置href爲?foo=bar，這將是從評論http://mydomain.com?foo=bar

變化：

}).on("click",".loadLink",function(e){ 

成爲

}); 
$(".loadLink").on("click",function(e){ 

Answer 2

您兩次約束力的.sortLink單擊處理程序，無一不將在點擊時觸發。嘗試刪除嵌入在Ajax成功處理程序中的綁定調用。