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成功处理程序中的绑定调用。