• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
攻城狮的世界我不懂——lmky
梦想还是要有的!
博客园    首页    新随笔    联系   管理    订阅  订阅
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("服务器忙,请稍候再试!");

                 }

             });

         }else{

             alert("对不起,当前行的每一条信息均不能为空,请补全后提交!");

         }

    }); 

问题是,为什么点击“更多”触发的事件添加的文本框和“提交”按钮,这个按钮不执行class="submitBtn"的点击事件?

 

解决:在添加更多一行的时候所产生的 input 和 button 都是动态生成的,所以不能使用 click,要使用 live (jquery 1.7.2 之后的版本不建议使用 live) 或 on

把$(".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
....

 

posted on 2016-08-17 09:20  limeiky  阅读(9006)  评论(1)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3