[英]How do I dynamically add an jquery ui event handler to a dynamically created button?
我有一个jQuery UI模态对话框形式,可以将项目添加到表中。 表格列之一是我用于编辑相关行的链接。 这是一个按钮对象,我想添加一个事件处理程序,当用户单击该按钮时,它将运行ajax查询以拉回所选行ID的信息,并以表格形式显示该数据,以供用户编辑选定的行。
我试图让它使用相同的功能
$( ".edit-user" )
.button()
.click(function() {
//do something here
});
在这里,使用“编辑”按钮创建动态行的代码。 我正在尝试将“ click”事件处理程序附加到动态创建的按钮上。
$( "#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倾斜
使用这样的东西:
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演示 。
尝试这个
$(“ #users tbody”).on('click','。edit-user',function(){})
事件处理程序仅绑定到当前选定的元素; 当您的代码调用.on()时,它们必须存在于页面上。 因此,在上述代码中,“#users tbody”必须在生成代码之前存在,而在“#edit-user-15”之前不存在。
看一下这个。 http://jsfiddle.net/Wu7aX/
$(".edit-user")
是on
方法的button
参数的父级。 这样的事情可能更适合您。 $("body").on('click','button.edit-user', function(){ var parameters = { "cid":this.id.replace(/\\D/g,"") }; ...
这样,每次单击body元素jquery都会检查单击是否来自具有class edit-user
元素内的button
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.