1

私はjQueryを初めて使用し、この問題を解決する方法を考えています。このコードを介してリンクを表示するために、削除をマークしました。

$('a[id^="del"]').css('border','red 1px solid');

初期テーブル

問題は、このコードを介して新しいアクティビティを追加したときです。

function addGradebkhdr() {

var formData = formToJSON();

    $.ajax({
      type: 'post',
      contentType: 'application/json',
      url: 'http://samle.com/api',
      dataType: "json",
      data: formData,
      success: function(data, textStatus, jqXHR){
        **addTableGradebkhdr(data);**
      },
      error: function(jqXHR, textStatus, errorThrown){
        // handle error
      }
    });
 }

function addTableGradebkhdr(data) {

  var lr = $(".tb-gradebkhdr tbody tr:last-of-type");
  var no = parseInt($(".tb-gradebkhdr tbody tr:last-of-type td:first-of-type").text());
  var ctr = no + 1;
    var d = new Date(data.date);
    var day = d.getDate();
    var month = d.getMonth() + 1; //Months are zero based
    var year = d.getFullYear();
    var sDate = month + "/" + day + "/" + year;

    var row = '<tr id="'+ data.id +'" ><td>'+ ctr +'</td>';
            row += '<td>'+ data.criteria_name +'</td>';
            row += '<td>'+ data.rawhigh +'</td>';
            row += '<td>'+ sDate +'</td>';
            row += '<td>'+ data.quarter +'</td>';
            row += '<td>'+ data.remarks +'</td>';
            row += '<td>';
            row += '<a gradebkhdrid="'+ data.id +'" id="edit-'+ data.id +'" href="#">Edit</a> ';
            row += '<a gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" href="#">Delete</a>';
            row += '</td></tr>';
        lr.after(row);


}


$(document).ready(function(){

$("#frmBtn-grbkhdr-save").on('click',**addGradebkhdr**);

$('a[id^="del"]').each(function(){
    $(this).on("click",function() {
            var gradebkhdrid = $(this).attr('gradebkhdrid');    
        deleteGradebkhdr(gradebkhdrid);
        });     
  });
});

テーブルは次のようになります。

fasd

ご覧のとおり、最後の削除はによって検出されませんでした

$('a[id^="del"]').each(function(){
    $(this).on("click",function() {            
        var gradebkhdrid = $(this).attr('gradebkhdrid');
        deleteGradebkhdr(gradebkhdrid);
     });
});

赤い境界線はテーブルの一部ではありませんでした。イベント/エラートラップを追跡するために使用しました。最初の画像でわかるように、ページが読み込まれ、すべての削除リンクが赤でマークされています。これは、削除リンクがすべて機能することを意味します。

しかし、フォームを送信するためにjQuery ajax関数を介して新しいアクティビティを追加し、[削除]ボタンを含むテーブル行とその要素を内部に作成したとき。追加された削除リンクが機能せず、2番目の画像でわかるように、作成した赤い線も適用されませんでした。

4

7 に答える 7

1

clickつまり、存在しない要素（将来存在する要素）にもイベントをアタッチしたいということですか？これを試して：

$(document).on( 'click', 'a[id^="del"]', function(){      
    var gradebkhdrid = $(this).attr('gradebkhdrid');
    deleteGradebkhdr(gradebkhdrid);
});

documentたとえば、これらすべての行のホルダーで変更できます$( '#myTable' )...。

CSSの場合：カスタムクラスをタグに追加し、別のスタイルシートファイル（またはタグ）aで適切にスタイル設定します。<style>

于 2012-10-02T06:37:41.870 に答える
1

この問題には2つの側面があり、2つの別々の解決策があります。

削除ボタンにクラスを追加して、要素のスタイルを直接変更せずにプレーンCSSでそれらをターゲットにできるようにします。

row += '<a gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" class="delButton" href="#">Delete</a>';

これで、このCSSを使用して境界線を設定でき、新しく追加された要素に対しても機能します。

.delButton { border: 1px solid red; }

追加された要素のクリックイベントを処理するには、デリゲートを使用します。

$('.tb-gradebkhdr').on('click', 'a[id^="del"]', function(){
  var gradebkhdrid = $(this).attr('gradebkhdrid');    
  deleteGradebkhdr(gradebkhdrid);
});

イベントハンドラーはテーブルにバインドされ、バブルが発生したときにイベントをキャッチするため、新しく追加された要素に対しても機能します。

于 2012-10-02T06:42:31.197 に答える
0

CSSを使用していないことを思い出し$('a[id^="del"]').css('border','red 1px solid');てください。そうすれば、jQueryで選択している要素にのみborderが適用されます。

...your code
....
lr.after(row);
$('a[id^="del"]').css('border','red 1px solid');

また

境界線の色を直接設定できます

row += '<a style="border:red 1px solid;" gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" href="#">Delete</a>';

jQuery.liveを使用できます

$('a[id^="del"]').live(function() {            
     var gradebkhdrid = $(this).attr('gradebkhdrid');
     deleteGradebkhdr(gradebkhdrid);
});
于 2012-10-02T06:38:55.263 に答える
0

jQueryのライブ関数を使用できます：http：//api.jquery.com/live/

または、行の作成時に関数「addTableGradebkhdr」にハンドラーを明示的に追加できます

于 2012-10-02T06:37:10.123 に答える
0

テーブルにページの読み込み時に行があることを期待していて、フロントエンド関数が同時にアタッチされている場合は、jquery.clone（）関数を使用して前の行をコピーし、後で内容を変更できます。これにより、コードが節約され、以前のリスナーが新しい要素に適用されます。

var newRow = $("table tr:last").clone(true);
$(newRow).find("td:eq(0)").html("new data for column 1");

$(newRow).insertAfter(row);
于 2012-10-02T06:42:35.847 に答える
0

これで試すことができます

....
lr.after(row);
$("a[id^='del']:last").css('border', 'red 1px solid');
于 2012-10-02T06:47:40.027 に答える
0

これは2つの方法で行うことができます。

1）スタイルシートでスタイルを定義できます
。2）ライブバインディング関数から同じ行を呼び出すことにより、javascriptでスタイルを適用できます。http://api.jquery.com/on/からjqueryのon（）関数を使用してライブバインディングを実行できます
。ここで、スクリプトが使用しているため、idは「del」で始まります。追加要素には、で始まる削除リンクIDが必要です。同じスクリプトを使用している場合は、「del」。その削除リンクのクラスを修正し、スクリプト行を次のように更新することをお勧めします

$('a[class="deleteLink"]').css('border','red 1px solid');

それが役に立てば幸い。

于 2012-10-02T06:48:11.567 に答える