How to add click listener to dynamically added button?

Question

I'm adding a button dynamically by doing:

<input id="{Id}" type="submit" value="View">

{Id} is replaced at runtime with the record id.

I would like to have a function like:

function viewRecord(button) {
    //Do something here...
}

How can I add a click listener to the button that corresponds to the correct button being clicked?

I've started learning jquery today and would like an answer that shows how it's implemented.

EDIT

Based on the answer below, I'm trying the following:

<td><input class="viewRecord" type="submit" value="View"></td>

$(".viewRecord").click(function () {
    var $table = $('#table'),
    var $tableBody = $table.find('tbody'),
    var $text = $tableBody.closest('tr').attr('id');

    alert($text);
});

However, no alert is being displayed.

Am I missing something?

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Turnip, Aug 07 '16 at 18:01
"replaced at runtime" by what? Can that same code also add the code for the handler? Can you create a handler on `document` and filter by `id` values? It seems like there's more to this than we're seeing. — David, Aug 07 '16 at 18:03
you can make a common function which takes in one parameter as the `ID` of that respective element and performs different operation based on the ID, then bind `onclick='function(this.id)'` to the input. Dynamically they can be injected by the `setAttribute` method to be called upon the element. — Utkarsh Vishnoi, Aug 07 '16 at 18:17

Mohammad Akbari · Answer 1 · 2016-08-08T12:47:00.003

1

use following code:

<div id="container">
    <input id="{Id}" type="submit" value="View" class="dynamic-btn" />
</div>

(function($) {
    var btnClick = function(){
        var id = $(this).attr('id');
        alert(id);
        /*Do smth that you needed*/
    };

    $(function() {
        $("#container").on("click", ".dynamic-btn", btnClick)
    });

}(jQuery));

edited Aug 08 '16 at 12:47

answered Aug 07 '16 at 18:26

Mohammad Akbari

4,486
6
43
74

How can I pass the `id` from the row as a parameter to the function? – Ivan-Mark Debono Aug 08 '16 at 12:37

score 1 · Answer 2 · answered Aug 08 '16 at 13:30

1

Two steps:

1) Find the input with:

var dynamicButton = document.getElementById('{Id}');

2) Add the click Event Listener with:

dynamicButton.addEventListener('click',function(){viewRecord(dynamicButton.id);},false);

answered Aug 08 '16 at 13:30

Rounin

27,134
9
83
108

How to add click listener to dynamically added button?

2 Answers2