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
    ....
  • 相关阅读:
    LeetCode 230. 二叉搜索树中第K小的元素(Kth Smallest Element in a BST)
    LeetCode 216. 组合总和 III(Combination Sum III)
    LeetCode 179. 最大数(Largest Number)
    LeetCode 199. 二叉树的右视图(Binary Tree Right Side View)
    LeetCode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)
    LeetCode 106. 从中序与后序遍历序列构造二叉树(Construct Binary Tree from Inorder and Postorder Traversal)
    指针变量、普通变量、内存和地址的全面对比
    MiZ702学习笔记8——让MiZ702变身PC的方法
    你可能不知道的,定义,声明,初始化
    原创zynq文章整理(MiZ702教程+例程)
  • 原文地址:https://www.cnblogs.com/limeiky/p/5778627.html
Copyright © 2011-2022 走看看