Jquery on（'click'）带有动态按钮ID

Question

我有一个评论的回复表单是循环数据库，每个表单和回复按钮都会动态分配差异ID，例如<button type="button" id="btn_reply_comment_'.$row['id'].'">Post Reply</button>以及带有{{1的表单ID }}

我想通过<form id="reply_form_'.$row['id'].'">制作一个ajax调用触发器，但我无法指定动态ID以匹配单击哪个按钮，怎么办呢？

通过按钮点击触发ajax的Jquery：

#btn_reply_comment_{follow by dynamic ID}

Answer 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
});

Answer 2

你应该使用一个类。并在teh类上设置click处理程序。

因此，您的HTML可能如下所示：

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

你的jQuery看起来像：

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

    alert(parameters);

    //ajax call here

});

Answer 3

将ID存放在元素本身上。无需使用字符串操作。

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

});