Jquery on('click') with dynamic button ID

Question

I have a comment's reply form which is loop through database, each of the form and reply button are dynamically assigned with difference ID, such as <button type="button" id="btn_reply_comment_'.$row['id'].'">Post Reply</button> as well as a form ID with <form id="reply_form_'.$row['id'].'">.

I want to make an ajax call trigger by the #btn_reply_comment_{follow by dynamic ID}, but I cannot assign dynamic ID to match with which button is clicked, how can it be done?

Jquery to trigger ajax by button click:

$('body').on('click', '#btn_reply_comment_'+id, function(){
    var parameters = $(this).closest('form').serialize();

    alert(parameters);

    //ajax call here

});

assign a class attribute to the nodes, and listen on the class. — karthikr, Apr 02 '14 at 22:17
possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — Francisco Corrales Morales, Apr 02 '14 at 22:24

score 1 · Accepted Answer · answered Apr 02 '14 at 22:20

You should use a class for this. And set up the click handler on teh class.

So your HTML might look like:

<button type="button" id="btn_reply_comment_'.$row['id'].'" class="post_reply_button">Post Reply</button>

And your jQuery would look like:

$('body').on('click', '.post_reply_button', function(){
    var parameters = $(this).closest('form').serialize();

    alert(parameters);

    //ajax call here

});

Joseph Dailey · Answer 2 · 2014-04-03T06:33:42.227

1

html

<button id="btn_reply_comment_'.$row['id'].'" class="className">Post Reply</button>

jquery

$(".className").click(function(){
    var parameters = $(this).closest('form').serialize();

    alert(parameters);

    //ajax call here
});

edited Apr 03 '14 at 06:33

answered Apr 02 '14 at 22:20

Joseph Dailey

4,735
2
15
18

score 0 · Answer 3 · answered Apr 02 '14 at 22:23

Stash the ID on the elements themselves. No need to use string manipulation.

HTML

"<button type="button" class="btn_reply_comment" data-rowid="'.$row['id'].'">"
"<form id="reply_form" data-rowid="'.$row['id'].'">"

Javascript

$('body').on('click', '.btn_reply_comment', function(){
    var rowId = $(this).data('rowid'),
        parameters = $('form[data-rowid=' +rowId + ']').serialize();

    alert(parameters);

    //ajax call here

});

Jquery on('click') with dynamic button ID

3 Answers3