jquery - プログラムで作成されたボタンに onclick 関数を追加する方法

Question

ボタンがクリックされたときに JavaScript を使用して行を追加するテーブルがあります。これが私のコードです：

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var newRow = "<tr><td>" + $("#txtProducts").val() + "</td><td>" + ("#txtQty").val()  "</td><td><input type='button' value='Remove' id='btnRemove' /></td></tr>";
    $("#tblProducts").append(newRow);
});

私の問題は、行ごとに削除ボタンを追加するため、変数 newRow 内に含めるため、削除ボタンをクリックすると対応する行が削除されるように、onClick イベントを追加するにはどうすればよいですか?

Answer 1

最初に動的ボタンに共通クラスを配置します

<input type='button' value='Remove' class='remove' />そこにIDが必要な場合は、入力ボタンに一意のIDを好きで与えます。コードで使用しているカウンター変数を使用して、一意の ID を作成できます。

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var newRow = "<tr><td>" + $("#txtProducts").val() + "</td><td>" + $("#txtQty").val() + "</td><td><input type='button' value='Remove' id='btnRemove"+counter+"' class='remove' /></td></tr>";
    $("#tblProducts").append(newRow);
});

次のコードを追加すると、削除ボタンの親行が削除されます。

 $("#tblProducts").on('click', '.remove', function(){
       $(this).closest('tr').remove();
 })

または、動的IDを生成している場合は、次のようなIDで動作するように変更できます

$("#tblProducts").on('click', '[id^=btnRemove]', function(){
     $(this).closest('tr').remove(); 
});

Answer 2

2 つのオプションがあります。テーブルまたは単一のボタン (行) のクリックを登録できます。大量の行があり、そのためボタンがある場合は、テーブルのクリックを登録して、システム内のリスナーを減らすことが理にかなっています。

新しく作成されたアイテムにプログラムでイベントを登録する場合は、次のようにします。

var $myItem = $('<input type="button"/>');
$myItem.on('click', function(e) {});

Answer 3

.on()クリックのイベント ハンドラーをアタッチするために使用します。

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

Answer 4

$(document).on("click", "#dynamicButton", function(e) { });

Answer 5

各行にカウンター変数を含む ID を指定すると、各 ID がその時点でのカウントに基づいているため、クリックされた行の ID によって簡単に削除できます。

Answer 6

追加には次のコードを使用しました。

var tbl= document.getElementById('tgtbl'); var tblrow = tbl.insertRow(tbl.rows.length);
var cell1 = tblrow.insertCell(0); cell1.innerText = tname; cell1.textContent = tname;
var cell2 = tblrow.insertCell(1); cell2.innerText = tvalue; cell2.textContent = tvalue;
var cell3 = tblrow.insertCell(2); cell3.innerHTML = '<a href="#" onclick="removerow(' + (tbl.rows.length - 1) + ')">Remove</a>';

および削除の場合 (tdata は隠しフィールドでした):

    var tbl = document.getElementById('tgtbl');
var tname = tbl.rows.item(rowindex).childNodes.item(0).innerText;
var idx = tdata.value.indexOf(tname.toLowerCase());
if (idx != -1) { tbl.deleteRow(rowindex);
  var tgd = tdata.value; tdata.value = tgd.substring(0, idx); tgd = tgd.substring(idx);
  if (tgd.indexOf(';') != -1) { tdata.value = tdata.value + tgd.substring(tgd.indexOf(';') + 1); }
for (i = 1; i < tbl.rows.length; i++) {
    tbl.rows.item(i).childNodes.item(2).innerHTML = '<a href="#" onclick="removerow(' + i + ')">Remove</a>'; }
}

私はjqueryを使用していないことを知っていますが、「削除」コードでアイデアが得られます

Answer 7

 $('#btnRemove').live ('click', function () {
       $(this).closest('tr').remove();
 });