jquery添加的html元素按钮为什么不执行类样式绑定的click事件
2017-10-19 15:01
459 查看
代码举例:
更多按钮:
<input type="button" class="addMore" id="addMore${issue.id }" value="更多" />
点击按钮添加一行文本框和“提交”按钮:(没有问题,可以正常添加)
$(".addMore").click(function(){
var index = this.id.substring(7,this.id.length);
//$("#tr"+index).clone().appendTo("#table"+index);
$("#table"+index).append("<tr><td></td>"+
" <td><input id='content'"+num + " type=text size=60/></td>"+
"<td><input id='date'"+num +" type=text /></td>"+
"<td><input id='result'"+num+" type=text /></td>"+
"<td><input type=button class='submitBtn' id='addBtn'"+index +" value='提交'/></tr>");
});
所有“提交”按钮的点击事件:
$(".submitBtn").click(function(){//初始化后添加的jQuery元素的click事件
//议题的编号,也是text的index
var index = this.id.substring(6,this.id.length);
alert("index="+index);
var content = $("#content"+index).val();
var date = $("#date"+index).val();
var result = $("#result"+index).val();
//判断是否有空值
if(content.length != 0 && date.length != 0 && result.length != 0 ){
$.ajax({
url:"addIssueInfo",
type:"post",
data: {issueContent:content,
issueId:index,
issueDate:date,
issueResult:result},
datatype: "json",
success:function(){
alert("添加成功!");
$tr = $("#addBtn"+index).parent("td").parent("tr");
$tr.remove();
//追加行
$("#table"+index).append("<tr><td></td><td>"+content+"</td><td>"+date+"</td><td>"+result+"</td><td></td></tr>");
},error:function(){
alert("服务器忙,请稍候再试!");
}
});
}else{
alert("对不起,当前行的每一条信息均不能为空,请补全后提交!");
}
});
问题是,为什么点击“更多”触发的事件添加的文本框和“提交”按钮,这个按钮不执行class="submitBtn"的点击事件?
更多按钮:
<input type="button" class="addMore" id="addMore${issue.id }" value="更多" />
点击按钮添加一行文本框和“提交”按钮:(没有问题,可以正常添加)
$(".addMore").click(function(){
var index = this.id.substring(7,this.id.length);
//$("#tr"+index).clone().appendTo("#table"+index);
$("#table"+index).append("<tr><td></td>"+
" <td><input id='content'"+num + " type=text size=60/></td>"+
"<td><input id='date'"+num +" type=text /></td>"+
"<td><input id='result'"+num+" type=text /></td>"+
"<td><input type=button class='submitBtn' id='addBtn'"+index +" value='提交'/></tr>");
});
所有“提交”按钮的点击事件:
$(".submitBtn").click(function(){//初始化后添加的jQuery元素的click事件
//议题的编号,也是text的index
var index = this.id.substring(6,this.id.length);
alert("index="+index);
var content = $("#content"+index).val();
var date = $("#date"+index).val();
var result = $("#result"+index).val();
//判断是否有空值
if(content.length != 0 && date.length != 0 && result.length != 0 ){
$.ajax({
url:"addIssueInfo",
type:"post",
data: {issueContent:content,
issueId:index,
issueDate:date,
issueResult:result},
datatype: "json",
success:function(){
alert("添加成功!");
$tr = $("#addBtn"+index).parent("td").parent("tr");
$tr.remove();
//追加行
$("#table"+index).append("<tr><td></td><td>"+content+"</td><td>"+date+"</td><td>"+result+"</td><td></td></tr>");
},error:function(){
alert("服务器忙,请稍候再试!");
}
});
}else{
alert("对不起,当前行的每一条信息均不能为空,请补全后提交!");
}
});
问题是,为什么点击“更多”触发的事件添加的文本框和“提交”按钮,这个按钮不执行class="submitBtn"的点击事件?
解决:在添加更多一行的时候所产生的 input 和 button 都是动态生成的,所以不能使用 click,要使用 live (jquery 1.7.2 之后的版本不建议使用 live) 或 on < 4000 span style="font-size:16px;">把$(".submitBtn").click(function(){ 改为 $(".submitBtn").live('click', function(){ 或者 $(".submitBtn").on('click', function(){ 记住如果元素在页面初始化的时候不存在,而是之后通过动态生成在页面中的,要对这些元素进行操作,例如 click, blur, keyup, change....,都要使用 on .on('click', function .on('blur', function .on('keyup', function ....
相关文章推荐
- jquery添加的html元素按钮为什么不执行类样式绑定的click事件
- 用jquery 绑定一个按钮click事件后,第一次点击后,一切正常,第二次点击,竟然执行两次,以后越来越多
- 用jquery 绑定一个按钮click事件后,第一次点击后,一切正常,第二次点击,竟然执行两次,以后越来越多
- 用jquery 绑定一个按钮click事件后,第一次点击后,一切正常,第二次点击,竟然执行两次,以后越来越多
- 用jquery 绑定一个按钮click事件后,第一次点击后,一切正常,第二次点击,竟然执行两次,以后越来越多
- EasyUi笔记:jquery执行append后easyui按钮样式失效
- JQuery 给元素绑定click事件多次执行的解决方法
- JQuery给元素绑定click事件多次执行的解决方法
- jquery为按钮绑定事件(快速执行函数)
- JQuery 给元素绑定click事件多次执行的解决方法
- asp.net C#动态添加创建生成button按钮控件没有触发执行响应click绑定事件处理
- 【JQUERY】默认样式添加之后自动添加click事件的解决办法
- 如何在html中直接给某个按钮置灰(样式、去除绑定事件), querySelector与jquery selector的不同之处
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
- jquery中绑定click事件重复执行问题
- jQuery绑定事件不执行,添加alert后可以正常执行
- [JQuery]随心所欲添加删除按钮Click事件
- Jquery实现动态绑定单击时间,动态添加样式
- 使用jquery当页面打开时,将一个事件绑定到控件(同时执行两个事件),并修改加载样式类中的样式
- JQuery给元素绑定click事件多次执行的解决方法