2

データベースからテーブルにデータをロードする大学のウェブサイトを作成する必要があります。私のテーブルは次のようになります: https://dl.dropboxusercontent.com/u/6265197/Table.png

まず、データベースからコンテンツを読み込み、テーブルを作成します。

...
$.each(data, function (index, item) {
var counter = index;
counter++;
...
table += '<td><a href="#" ' + 'id=edit' + counter + '><img src="img/edit-icon.png"' + '</a> </td>';
table += '<td><a href="#" ' + 'id=delete' + counter + '><img src="img/delete-icon.png"' + ' ></a> </td>';
...

機能する右側の一意の ID のボタンを指定します。

私の意図は、「edit1」が押された場合、「name1」を取得して操作し、データベースで見つけることができるということです。

たとえば、コンソールに空の文字列しか表示されないこれを試しました。

...
for (var x = 1; x <= 2; x++) {
    $('body').on('click', '#edit' + x, function () {
        console.log($('#name' + x).text());
    });
...

これは基本的に機能します..コンソールに文字列（ A Long Way Down ）が表示されます。

...
for (var x = 1; x <= 2; x++) {
    $('body').on('click', '#edit' + x, function () {
        console.log($('#name1').text());
    });
...

あなたが私に答えてくれることを願っています。

挨拶アンドレアス

4

1 に答える 1

3

Event Delegationを学ぶ必要があります。

カスタムdata-*属性を使用して値を設定できます。次に、それ.data()を取得するために使用します。

サンプルコード

table += '<td><a href="#" class="edit" data-id="' + counter + '"><img src="img/edit-icon.png"' + '</a> </td>';
table += '<td><a href="#" class="delete" data-id="' + counter + '"><img src="img/delete-icon.png"' + ' ></a> </td>';

$(document).on('click', ".edit", function(event){
    event.preventDefault();
    var id = $(this).data('id');
    var text = $('#name' + id).text()
    console.log(text);
});

代わりに、document最も近い静的コンテナーを使用する必要があります。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用してクリック イベントを動的に作成された要素にバインドし、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

于 2014-06-30T09:08:10.070 に答える