JQuery Coldfusion 동적 정렬 하이퍼 링크 문제

Question

내가 작업하고있는 프로젝트의 성격을 감안할 때 확장 성을 위해 플러그인을 사용하지 않으려 고합니다. 그러나 플러그인이 필요하다면, 제안을 할 수 있습니다.

먼저 jQuery 페이지 매김 스크립트에서 성공했습니다. 미리 정의 된 (ColdFusion 스크립트에서) 클래스 "loadLink"의 하이퍼 링크를 사용하여 페이지 당 10 행의 데이터를 새로운 처리되고 div 태그 안에 표시되는 표. 또한 정렬 할 헤더 중 하나를 클릭하여 해당 페이지 매김 된 테이블의 데이터를 다시 정렬 할 수 있습니다. 페이지 링크처럼 새로운 유형의 테이블을 그대로 재현하는 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"); 
         } 
        }); 
       }); 
      } 
     }); 
    } 
}); 
}); 

또는 다른 무엇을 나는 종류가 지속적으로 아약스 형식으로 작동하도록하려면 어떻게해야합니까?

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 노드에 바인딩되어 있는지 확인합니다.

IE에서 recorddata에 대한 변경 사항까지는로드 한 후 앵커 태그를 동적으로 추가하면 사용자가 지정한 경로가 아닌 위치에 대한 전체 경로가 포함됩니다. 당신이 설정 한 경우 그래서, href는 ?foo=bar, 그것은 코멘트에서 http://mydomain.com?foo=bar

변경 될 것입니다 : 당신은 두 번 .sortLink의 클릭 핸들러를 바인딩

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

Answer 2

된다

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

, 두 클릭시 트리거됩니다. Ajax 성공 처리기에 포함 된 바인드 호출을 제거하십시오.