JQuery Coldfusion Dynamic Sort HyperLinkの問題

Question

私が取り組んでいるプロジェクトの性質上、スケーラビリティのためにプラグインを使用しないようにしています。しかし、プラグインが必要なことが判明した場合は、私は提案に開放しています。

最初に、jQueryページネーションスクリプトで成功しました。（ColdFusionスクリプトで）定義済みのハイパーリンク「loadLink」を使用して、ページごとに10行のデータを新しいdivタグ内で処理されて表示されるテーブル。さらに、並べ替えたいヘッダーの1つをクリックして、そのページングされたレコードテーブルのデータを再ソートすることができます。ページリンクと同様に、新しいソートをそのまま使用してテーブルを再現するCFコンポーネントにajax呼び出しを送信します。

すべて問題なく動作しますが、ここでは大きな問題に取り組んでいます。表示するレコードの新しいページを選択するたびに、私はまだそのデータの新しい種類を実行できます。しかし、2番目の種類の列を実行しようとすると、別の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"); 

}); 

これはあなたのイベントは常にAJAX内蔵DOMのノードにバインドされていることを確認します。

私がrecorddataに行った変更の限り、ロード後にアンカータグを動的に追加すると、与えられたパスではなく、場所へのフルパスが含まれます。あなたが設定するのであれば、hrefは?foo=barとして、それはコメントからhttp://mydomain.com?foo=bar

変更されます：あなたは二回.sortLinkのクリックハンドラをバインドしている

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

Answer 2

になり

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

、および両方クリックでトリガーされます。 Ajaxの成功ハンドラに埋め込まれたバインド・コールを削除してみてください。