Javascript 如何将jquery ui事件处理程序动态添加到动态创建的按钮？

我有一个jQueryUI模式对话框表单，可以向表中添加项。其中一个表列是我编辑相关行的链接。这是一个button对象，我想添加一个事件处理程序，当用户单击按钮时，它会运行一个ajax查询来提取所选行ID的信息，并以表单的形式显示该数据，以便用户编辑所选行

我试图让它使用相同的功能

$( ".edit-user" )
  .button()
  .click(function() {
    //do something here
});

下面是使用“编辑”按钮创建动态行的代码。我正在尝试将“单击”事件处理程序附加到动态创建的按钮

        $( "#users tbody" ).append( "<tr>" +
          "<td><button class=\"edit-user\" id=\"edit-user-15\">Edit</button></td>" +
          "<td>" + mc_last_name.val() + "</td>" +
          first_name +
          "<td>" + mc_primary_address.val() + "</td>" +
          "<td>" + mc_primary_city.val() + "</td>" +
          "<td>" + mc_primary_state.val() + "</td>" +
          "<td>" + mc_primary_zipcode.val() + "</td>" +
          phone + 
          email_address +
          "<td>" + mc_primary_addcommunity.val() + "</td>" +
        "</tr>" );

        $(".edit-user").on('click','button',function(){
            var parameters = {
                "cid":this.id.replace(/\D/g,"")
            };

        $.ajax({
                url : "./getcontact.php",
                type: "POST",
                data : parameters,
                success: function(data, textStatus, jqXHR)
                {
                    var arr = data.split('|||');

                    $.each(arr,function(key,value) {
                        var temp = value.split(':::')
                        $("#" + temp[0]).val(temp[1]);
                    });

                    $( "#dialog-form" ).dialog( "open" );
                },
                error: function(jqXHR, textStatus, errorThrown)
                {
                  alert(errorThrown);
                }
            });
        });

我对jquery比较陌生……所以这些奇怪的错误很难解释我在尝试做什么

想知道如何让桌子上的任意按钮使用特殊功能吗

坦克斯 jlimted

试试这个

$（“#users tbody”）。在（'click'，'edit user'，function（）{}）上

事件处理程序仅绑定到当前选定的元素；在代码调用.on（）时，它们必须存在于页面上。因此，在上述代码中，“users tbody”必须在生成代码之前存在，而“edit-user-15”之前则不存在。

请检查此项

$（“.edit user”）

是方法上的

按钮

参数的父级。 像这样的东西可能对你有用。

$（“body”）。在（'click'，'button.edit user'，function（）上{
变量参数={
“cid”：此.id.replace（/\D/g，”）
};
…

---

这样，每次单击body元素时，jquery都会检查单击是否来自类为“编辑用户”的元素内部的

按钮
元素使用如下方式：

function appendButton(){
  $( "#users tbody" ).append( "<tr>" +
          "<td><button class=\"edit-user\" id=\"edit-user-15\">Edit</button></td>" +
          "<td>" + mc_last_name.val() + "</td>" +
          first_name +
          "<td>" + mc_primary_address.val() + "</td>" +
          "<td>" + mc_primary_city.val() + "</td>" +
          "<td>" + mc_primary_state.val() + "</td>" +
          "<td>" + mc_primary_zipcode.val() + "</td>" +
          phone + 
          email_address +
          "<td>" + mc_primary_addcommunity.val() + "</td>" +
        "</tr>" );

}

这是工作表

function appendButton(){
  $( "#users tbody" ).append( "<tr>" +
          "<td><button class=\"edit-user\" id=\"edit-user-15\">Edit</button></td>" +
          "<td>" + mc_last_name.val() + "</td>" +
          first_name +
          "<td>" + mc_primary_address.val() + "</td>" +
          "<td>" + mc_primary_city.val() + "</td>" +
          "<td>" + mc_primary_state.val() + "</td>" +
          "<td>" + mc_primary_zipcode.val() + "</td>" +
          phone + 
          email_address +
          "<td>" + mc_primary_addcommunity.val() + "</td>" +
        "</tr>" );

}

$(document).on("click",".edit-user",function(){
 //Your On Click part here 

});