爱玺玺

爱玺玺的生活日记本。wx:lb87626

jQuery给动态添加的元素绑定事件的方法

$(".layui-form").on("click",".test11",function(){

  alert();

})

注意函数里是3个参数,容器元素绑定on函数,事件元素作为on函数参数。


<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>录入回访</title>

  <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->

<!--[if lt IE 9]>

  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>

  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

  <![endif]-->  

  <link rel="stylesheet" href="/layui/css/layui.css">

  <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>

</head>

<body class="layui-layout-body">


 

 <form class="layui-form"  action="/index.php/index/index/cvisaddin.html"  method="POST"  id="cvisform">          

  <table class="layui-table">

    <colgroup>

      <col width="100">

      <col width="100">

      <col width="100">

      <col width="200">

      <col>

    </colgroup>

    <thead>

      <tr>

        <th>卡号</th>

        <th>姓名</th>

        <th>手机</th>

        <th>回访日期</th>

        <th>备注</th>       

      </tr> 

    </thead>

    <tbody id="billTable">

    

      <tr>

        <td>00000006<input type="hidden" name="c_no[]" value="00000006"><input type="hidden" name="c_id[]" value="6"></td>

        <td>测试<input type="hidden" name="cname[]" value="测试"></td>

        <td>13689618522<input type="hidden" name="tel[]"></td>

        <td><input type="text" class="layui-input test11" id="test1" placeholder="yyyy-MM-dd"  name="r_date[]"></td>

        <td><input type="text" name="note[]" class="layui-input"></td>

      </tr>




      <tr class="btr">

        <td colspan="1"><button  type="button" class="layui-btn layui-btn-primary layui-border-orange" id="addBill">增加</button></td>

        <td colspan="1"><button  type="button" class="layui-btn layui-btn-primary layui-border-orange" id="addremove">删除</button></td>

        <td colspan="4"></td>

      </tr>

      

    </tbody>

  </table>

 </div>



  <div class="layui-form-item">

    <div class="layui-input-block" style=" text-align:  center;">

      <button type="button" class="layui-btn" id="ajaxBtn">保存</button>

    </div>

  </div>



</form>


</body>

</html>

<script type="text/javascript">

$("#addBill").on("click",function(){

   $("#billTable").children(":last-child").before('<tr><td>00000006<input type="hidden"name="c_no[]"value="00000006"><input type="hidden"name="c_id[]"value="6"></td><td>测试<input type="hidden"name="cname[]"value="测试"></td><td>13689618522<input type="hidden"name="tel[]"></td><td><input type="text" class="layui-input test11" id="test1" placeholder="yyyy-MM-dd" name="r_date[]"></td><td><input type="text"name="note[]"class="layui-input"></td></tr>');

})


$("#addremove").on("click",function(){

   $("#billTable").children(":last-child").prev().remove();

})


$("#ajaxBtn").on("click",function(){


  var formData=$("#cvisform").serialize();

   $.ajax({

    type: "POST",

    url: "/index.php/index/index/cvisaddin.html",

    processData:true,

    data:formData,

    success: function(data){

        alert(data);

    }


   });


})


$(".layui-form").on("click",".test11",function(){

  alert();

})

</script>


发表评论:

Powered By Z-BlogPHP 1.4 Deeplue Build 150101

Copyright Your WebSite.Some Rights Reserved.

蜀ICP备11021721号-5