Как добавить функцию onclick для программно созданной кнопки

У меня есть таблица, в которую я добавляю строки с помощью 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, чтобы, если я нажму кнопку удаления, соответствующие строки будут удалены?


html jquery
person user1597438    schedule 07.11.2012    source источник

Ответы (6)


arrow_upward
4
arrow_downward

сначала поместите общий класс на свою динамическую кнопку

например <input type='button' value='Remove' class='remove' /> и дайте уникальный идентификатор вашей кнопке ввода, если вы хотите, чтобы идентификатор был там. вы можете сделать уникальный идентификатор, используя переменную счетчика, которую вы используете в своем коде.

$("#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();
 })

Или, если вы создаете свои динамические идентификаторы, вы можете изменить его для работы с идентификатором, например

$("#tblProducts").on('click', '[id^=btnRemove]', function(){
     $(this).closest('tr').remove(); 
});
person Yograj Gupta    schedule 07.11.2012
comment
Однако небольшой вопрос: можно ли использовать идентификатор кнопки вместо класса? как $(#tblProducts).on('click', 'btnRemove' + counter + '', function() { $('#btnRemove' + counter).closest('tr').remove(); - person user1597438; 09.11.2012
comment
@ user1597438, для этого вы должны попробовать это .. $(#tblProducts).on('click', '[Id^=btnRemove]', function(){ $(this).closest('tr').remove( ); }); - person Yograj Gupta; 09.11.2012
comment
Я не уверен, правильно ли я вас понимаю, но сейчас я пытаюсь получить данные из выбранной строки и передать их в базу данных, чтобы он мог удалить указанные данные из базы данных. По сути, сейчас я пытаюсь вычесть введенное количество из количества в базе данных, где имя соответствует имени, введенному в текстовое поле. Теперь мне нужно отменить это при нажатии динамической кнопки. Он должен получить данные таблицы для продукта и количества из выбранной строки и передать их в MVC.Net, который позаботится об обновлении базы данных. - person user1597438; 13.11.2012

arrow_upward
2
arrow_downward

Два варианта, можно прописать нажатие на стол или на одну кнопку (строку). если у вас большое количество строк и, следовательно, кнопок, может иметь смысл регистрировать нажатие на таблицу, чтобы иметь меньше слушателей в системе.

Если вы хотите программно зарегистрировать событие для любого вновь созданного элемента, вы можете сделать следующее:

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

arrow_upward
1
arrow_downward

Используйте .on(), чтобы прикрепить обработчик события для клика.

$("#dynamicButton").on("click", function(e) { });
person Grant Thomas    schedule 07.11.2012

arrow_upward
0
arrow_downward

Если вы дадите каждой строке идентификатор, содержащий переменную счетчика, чтобы каждый идентификатор был основан на подсчете в этот момент, вы можете легко удалить идентификатор строки, по которой щелкнули.

person Quinny    schedule 07.11.2012

arrow_upward
0
arrow_downward

Я использовал следующий код для добавления:

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, но код «удалить» даст представление

person CKmum    schedule 07.11.2012

arrow_upward

arrow_downward

person    schedule
comment
Хотя это старый пост, он все еще попадает в результаты поиска Google, поэтому я решил прокомментировать. Использование live устарело с версии 1.7 и удалено в версии 1.9, и вам следует использовать on. - person jaapz; 18.06.2015