zoukankan      html  css  js  c++  java
  • 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
    ....
  • 相关阅读:
    flask_第一个程序
    Web框架_MVC vs MVT
    python_使用qrcode生成二维码
    HDU 4641
    SPOJ NSUBSTR
    SPOJ LCS2 多个串的最长公共子串
    SPOJ LCS 后缀自动机找最大公共子串
    POJ 1509 循环同构的最小表示法
    HDU 4821 字符串hash
    SPOJ GSS1 静态区间求解最大子段和
  • 原文地址:https://www.cnblogs.com/limeiky/p/5778627.html
Copyright © 2011-2022 走看看