jquery添加的html元素按钮为什么不执行类样式绑定的click事件
代碼舉例:
更多按鈕:
<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("服務(wù)器忙,請稍候再試!");
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?});
? ? ? ? ?}else{
? ? ? ? ? ? ?alert("對不起,當前行的每一條信息均不能為空,請補全后提交!");
? ? ? ? ?}
? ? });?
問題是,為什么點擊“更多”觸發(fā)的事件添加的文本框和“提交”按鈕,這個按鈕不執(zhí)行class="submitBtn"的點擊事件?
?
解決:在添加更多一行的時候所產(chǎn)生的 input 和 button 都是動態(tài)生成的,所以不能使用 click,要使用 live (jquery 1.7.2 之后的版本不建議使用 live) 或 on把$(".submitBtn").click(function(){
改為
$(".submitBtn").live('click', function(){
或者
$(".submitBtn").on('click', function(){
記住如果元素在頁面初始化的時候不存在,而是之后通過動態(tài)生成在頁面中的,要對這些元素進行操作,例如 click, blur, keyup, change....,都要使用 on
.on('click', function
.on('blur', function
.on('keyup', function
....
?
轉(zhuǎn)載于:https://www.cnblogs.com/limeiky/p/5778627.html
總結(jié)
以上是生活随笔為你收集整理的jquery添加的html元素按钮为什么不执行类样式绑定的click事件的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 以太坊
- 下一篇: Python中简化的验证码功能实现