How to add onclick function for programmatically created button

Question

I have a table wherein I add rows using javascript when a button is clicked. Here's my code:

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

My problem is since I add the remove button per row, hence including it inside the variable newRow, how do I add an onClick event for it so that if I clicked the remove button the corresponding rows would be removed?

Yograj Gupta · Accepted Answer · 2012-11-09 11:18:28Z

5

first place a common class on your dynamic button

like <input type='button' value='Remove' class='remove' /> and give a unique id to your input button if you want id there. you can make unique id by using counter variable, which you are using in your code.

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

and add the following code, it will remove the parent row of remove button.

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

Or If you are generating your dynamic ids, you can change it to work with id like

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

edited Nov 9, 2012 at 11:18

answered Nov 7, 2012 at 10:18

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1597438 Over a year ago

A quick question though, is it possible to use the id of the button instead of the class? like $("#tblProducts").on('click', '"btnRemove' + counter + '"', function() { $('#btnRemove' + counter).closest('tr').remove();

Yograj Gupta Over a year ago

@user1597438, For this you should try this.. $("#tblProducts").on('click', '[Id^=btnRemove]', function(){ $(this).closest('tr').remove(); });

user1597438 Over a year ago

I'm not sure if I follow you correctly but what I'm trying to do now is get data from the selected row and pass it into the database so it can remove the said data from the database. Basically, what I'm trying to do now is subtract the quantity entered from the quantity on the database where the name matches the name entered on the textbox. Now, I need to revert this when the dynamic button is clicked. It should get the table data for product and quantity from the selected row and pass it to MVC.Net which would take care of the database update.

pintxo · Accepted Answer · 2012-11-07 10:23:50Z

2

Two options, you can register a click on the table or on a single button (row). if you have a large amount of rows, and therefor of buttons it might make sense to register the click on the table to have less listeners in the system.

If you want to programmatically register an event on any newly created item you could do the following:

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

answered Nov 7, 2012 at 10:23

pintxo

2,14514 silver badges27 bronze badges

Comments

Grant Thomas · Accepted Answer · 2012-11-07 10:15:36Z

1

Use .on() to attach an event handler for the click.

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

answered Nov 7, 2012 at 10:15

Grant Thomas

45.1k10 gold badges88 silver badges129 bronze badges

Comments

Om3ga · Accepted Answer · 2012-11-07 10:19:38Z

1

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

answered Nov 7, 2012 at 10:19

Om3ga

33.4k46 gold badges149 silver badges231 bronze badges

Comments

Quinny · Accepted Answer · 2012-11-07 10:20:25Z

0

If you give each row an ID containing the counter variable, so that each ones ID was based on the count at that point then you could easily remove by the ID of the row that was clicked.

answered Nov 7, 2012 at 10:20

Quinny

2094 silver badges9 bronze badges

Comments

CKmum · Accepted Answer · 2012-11-07 10:22:46Z

I used following code for add:

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>';

and for remove (tdata was hidden field):

    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>'; }
}

I know I havenot used jquery but the "remove" code will give an idea

Rahul Lamkhade · Accepted Answer · 2012-11-07 10:22:43Z

-1

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

answered Nov 7, 2012 at 10:22

Rahul Lamkhade

191 bronze badge

1 Comment

jaapz Over a year ago

Although this is an old post, it still ends up on google search results, so I thought I'd comment. Using live is deprecated since 1.7 and removed in 1.9 and you should use on.

Collectives™ on Stack Overflow

How to add onclick function for programmatically created button

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related