zoukankan      html  css  js  c++  java
  • jquery 动态生成的input添加change事件

    借助js的on方法,可以给动态生成的input标签,添加change事件

    1     //我的费率
    2     $(document).on("input propertychange", "#mytbody .my_rate", function (e) {
    3         var my_rate = $(this).val();
    4         var obj = $(this).parent().parent();
    5         var child_rate = $(obj.find('.child_rate')[0]).val();
    6         $(obj.find('.left_rate')[0]).val(parseFloat(my_rate)-parseFloat(child_rate));
    7     });

    这是动态生成的html结构

     1 <table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
     2         <thead>
     3         <tr>
     4             <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner">ID</div><div class="fht-cell"></div></th>
     5             <th style="text-align: center; vertical-align: middle;" width="10%"><div class="th-inner ">产品名称</div><div class="fht-cell"></div></th>
     6             <th style="text-align: center; vertical-align: middle;" width="5%"><div class="th-inner ">产品分类</div><div class="fht-cell"></div></th>
     7             <th style="text-align: center; vertical-align: middle;" width="5%"><div class="th-inner ">保费</div><div class="fht-cell"></div></th>
     8             <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">总服务费率</div><div class="fht-cell"></div></th>
     9             <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">下级分销服务费率</div><div class="fht-cell"></div></th>
    10             <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">剩余自留费率</div><div class="fht-cell"></div></th>
    11             <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">操作</div><div class="fht-cell"></div></th>
    12         </tr>
    13         </thead>
    14         <tbody id="mytbody">
    15              <tr id="0-id">
    16                 <td style="text-align: center; vertical-align: middle;" id="22-myid" data-value="22">22</td>
    17                 <td style="text-align: center; vertical-align: middle;" id="22-myname" data-value="京彩一生百万医疗">京彩一生百万医疗</td>
    18                 <td style="text-align: center; vertical-align: middle;" id="22-jq_category_name" data-value="意外险">意外险</td>
    19                 <td style="text-align: center; vertical-align: middle;" id="22-premium" data-value="0.00">0.00</td>
    20                 <td style="text-align: center; vertical-align: middle;"><input class="form-control my_rate" type="number" id="22-my_rate" value="15"></td>
    21                 <td style="text-align: center; vertical-align: middle;"><input class="form-control child_rate" type="number" id="22-child_rate" value="8"></td>
    22                 <td style="text-align: center; vertical-align: middle;"><input class="form-control left_rate" type="number" id="22-left_rate" value="5"></td>
    23                 <td style="text-align: center; vertical-align: middle;" class="mydel" data-id="0">删除</td>
    24             </tr>
    25             <tr id="1-id">
    26                 <td style="text-align: center; vertical-align: middle;" id="27-myid" data-value="27">27</td>
    27                 <td style="text-align: center; vertical-align: middle;" id="27-myname" data-value="平安一生">平安一生</td>
    28                 <td style="text-align: center; vertical-align: middle;" id="27-jq_category_name" data-value="健康险">健康险</td>
    29                 <td style="text-align: center; vertical-align: middle;" id="27-premium" data-value="100000.00">100000.00</td>
    30                 <td style="text-align: center; vertical-align: middle;"><input class="form-control my_rate" type="number" id="27-my_rate" value="20"></td>
    31                 <td style="text-align: center; vertical-align: middle;"><input class="form-control child_rate" type="number" id="27-child_rate" value="5"></td>
    32                 <td style="text-align: center; vertical-align: middle;"><input class="form-control left_rate" type="number" id="27-left_rate" value="5"></td>
    33                 <td style="text-align: center; vertical-align: middle;" class="mydel" data-id="1">删除</td>
    34             </tr>
    35          </tbody>
    36     </table>

    使用bind方法不行,具体,on和bind和区别自行百度吧,我也不明白

  • 相关阅读:
    xml学习笔记2
    用SVN下载sourceforge上的源代码
    析构函数的浅谈《原创》
    论程序员与妓女
    简单的动画
    突然收到Steve Harmon的短消息,真意外啊。
    从长春到北京--“一个人的旅行”
    动画停止和延时
    。NET :遍历某个权限集中的权限列表
    如何让Silverlight程序可以在浏览器外运行
  • 原文地址:https://www.cnblogs.com/cyfblogs/p/12887680.html
Copyright © 2011-2022 走看看