0

本当に簡単です。jQuery をTR使用して、削除ボタンを持つ新しいものを追加します。しかし、削除ボタンをクリックしても何も起こりません (新しく作成された を削除する必要がありますTR)。私はそれを働かせることができません。私はそれがこれと関係があるとほぼ確信しています：

$('.delete-data').on('click touchstart', '.add-new', function() {

私のコード:

// if clicked on new button add new TR
$('.add-new').on('click touchstart', function() {
  if ($(this).hasClass('company')) {
    newTr('company');
  } else {
    newTr('user');
  }
})

// adds new TR to table
function newTr(type) {
  var table = $('table');

  if (table.hasClass(type)) {
    table.find('tbody').append(
      '<tr contenteditable="true">
        <td>New ' + type + ' name</td>
        <td>License type</td>
        <td>0</td>
        <td>Expiry date</td>
        <td>xYsqffSX3X4a</td>
        <td class="delete-data" title="Delete this">&times;</td>
      </tr>'
    );
  }
}

// deletes data from table
$('.delete-data').on('click touchstart', '.add-new', function() {
  var parent = $(this).parent(),
      label = parent.find("td:first").html(),
      r = window.confirm("Permanently delete " + label + " and all its data?");

  if (r == true)
    parent.remove();
})

何か案は？ありがとう！

編集： Barmarのおかげで、解決策は次のとおりです。

$('table').on('click touchstart', '.delete-data', function() {
4

2 に答える 2

1

これは、stackoverflow に関する私の最初の投稿です ;) イベント ハンドラーは、現在選択されている要素にのみバインドされます。コードが呼び出しを行う時点でページに存在している必要があります。委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。だから、あなたの例について：

$('.example_table').on('click touchstart', 'td.delete-data', function() {})
于 2013-10-07T20:50:32.020 に答える
1

試す：

$("table").on('click touchstart', '.delete-data', function() {
    ...
}

イベント委任を使用する場合は、静的要素 (この場合) にバインドし、引数で$("table")動的要素 ( ) のセレクターを指定する必要があります。.delete-data

于 2013-10-07T20:37:01.330 に答える