1

私は以下のようなhtmlを持っています:

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr>
      <td>Item 1</td>
      <td><a href="#">delete</a></td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td><a href="#">delete</a></td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td><a href="#">delete</a></td>
    </tr>
  </tbody>
</table>

そこに項目を動的に追加できます。

ここで、ユーザーが削除をクリックした場合にリストから要素を削除するのに役立つ関数を作成する必要があります。私がすべきように見えます：

  1. リスト内の各アイテムに一意のIDを割り当てます（そのようなIDがあります）-どこに保管すればよいですか？一部としてhref?;
  2. ユーザーがリンクをクリックしたら、デフォルトのアクションを防止し、アイテム ID をパラメータとして関数にコントロールを渡す必要があります (リストから要素を非表示にし、POST リクエストをサーバーに送信します)。

どうやってするの？

4

4 に答える 4

4

これは、イベントの委任に最適なケースです。tableまたはでイベントをフックtbodyしますが、次のように、削除リンクで発生した場合にのみトリガーするように jQuery に依頼します。

$("#subscriptions-tbody").delegate("a", "click", function(event) {
    var row = $(this).closest('tr');

    // ...delete the row

    return false; // Don't try to follow the link
});

実例| ソース

tableイベントはorにフックされるため、イベントはorレベルtbodyで処理されるため、行の追加と削除は問題になりません。tabletbody

上記では、delegateis がいかに明示的であるかが好きなので、使用しています。jQuery 1.7 以降では、代わりにway-too-overloaded-on関数を使用できます。

$("#subscriptions-tbody").on("click", "a", function(event) {
    var row = $(this).closest('tr');

    // ...delete the row

    return false; // Don't try to follow the link
});

実例| ソース

引数の順序が若干異なることに注意してください。

于 2012-12-08T14:15:18.133 に答える
1

data-IDは、コントロールまたは行のいずれかに属性として格納できます。クリックハンドラーをテーブルitleslfに委任して、メソッドを使用してコードを実行するときに存在しない動的に追加された要素を考慮しますon()。

HTML：

<!-- class added to element -->
<a href="#" class="delecte-btn" data-id="3">delete</a>

JS

$('#subscriptions').on('click', '.delete-btn',function(evt){  
    evt.preventDefault();
    var id=$(this).data('id'), $row=$(this).closest('tr');
    /* send data to server and remove row on success*/
   $.post('serverUrl.php', { rowID: id, action :'delete'}, function(){
         $row.remove();
   })
})
于 2012-12-08T14:23:47.987 に答える
1

これを試して：

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr data-id="1">
      <td>Item 1</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="2">
      <td>Item 2</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="3">
      <td>Item 3</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
  </tbody>
</table>

削除アンカーのクラスに名前を付けます。たとえばclass="delete"、 、data-id各項目を一意に識別し、サーバーに送信する ID を知るために、テーブル行に属性を配置します。

js は次のようになります。

$("#subscriptions-tbody").on('click', 'a.delete', function(e){

   var tr = $(e.currentTarget).closest('tr');

   //get the id
   var id = tr.attr("data-id");

   //make ajax request
   $.ajax({
      url: 'script.php',
      data: id,
      success: function(data) {

         //hide the item or remove
         tr.remove(); // tr.hide();

         // ajax callback
     }
   });
});
于 2012-12-08T14:19:11.690 に答える
1

サーバー側に必要な情報 (などid) をtrwith data-attributes.on()に保持し、テーブルからのイベントの処理に使用する必要があります。

html

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr data-id="3">
      <td>Item 1</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="5">
      <td>Item 2</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="6">
      <td>Item 3</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
  </tbody>
</table>

脚本

$("#subscriptions").on("click", "a.delete", function(e) {
    e.preventDefault();
    var row = $(this).closest('tr'),
        relatedId = row.data('id');

    $.post(...); // use relatedId here
    row.fadeOut(500, function(){
       row.remove();
    })
});
于 2012-12-08T14:20:01.890 に答える