Question

我有一个jquery ui模式对话框表单，可以将项添加到表中。其中一个表列是我编辑相关行的链接。这是一个按钮对象，我想添加一个事件处理程序，当用户单击该按钮时，它会运行ajax查询以撤回所选行ID的信息并在表单中显示该数据以供用户编辑选定的行。

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

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

这里是使用编辑按钮创建动态行的代码。我想点击＆＃34;点击＆＃34;要附加到动态创建按钮的事件处理程序。

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

我尝试了几种不同的选择：

 $('#edit-user-15').on('click', 'button', function() {
     //Run the display form function.
 });

 $('#edit-user-15').delegate('click', 'button', function() {
     //Run the display form function.
 });

我对jquery相对较新......所以这些奇怪的错误很难解释我想要做什么。

寻找关于如何使表格上的任何按钮使用特殊功能的想法？

Thannks jlimted

Answer 1

使用这样的东西：

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>" );

}

并将类.edit-user的处理程序预定义为

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

});

这是工作jsfiddle demo。

Answer 2

试试这个

$（＆＃34; #users tbody＆＃34;）。on（＆＃39;点击＆＃39;，＆＃39; .edit-user＆＃39;，function（）{}）

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

Answer 3

检查一下。 http://jsfiddle.net/Wu7aX/

$(".edit-user")旨在成为button方法的on参数的父级。更像这样的东西可能适合你。 $("body").on('click','button.edit-user', function(){ var parameters = { "cid":this.id.replace(/\D/g,"") }; ...

这样，每次单击body元素时，jquery都会检查点击是否来自具有类button的元素内的edit-user元素。

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

3 个答案: