jquery2.x 动态绑定事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>动态添加表格行、列</title>
        <style type="text/css">
            table.table {
                font-family: verdana, arial, sans-serif;
                font-size: 11px;
                color: #333333;
                border-width: 1px;
                border-color: #666666;
                border-collapse: collapse;
            }

            table.table th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                font-size: 14px;
                border-color: #666666;
                background-color: #dedede;
                line-height: 20px;
            }

            table.table td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #ffffff;
                line-height: 18px;
            }
        </style>
    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                    <th>列4</th>
                    <th>列5</th>
                    <th>列6</th>
                    <th>列7</th>
                </tr>
            </thead>
            <tbody id="trlist">
                <tr>
                    <td><input type="checkbox" name="checkbox" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><button class="removeClass">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div>
            <input type="button" id="addrow" value="新增" />
            <input type="button" id="removerow" value="删除" />
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                // 绑定添加事件
                $("#addrow").click(addRow); 
                // 绑定删除事件。
                $("#removerow").click(removeMultipleRows); 
                
                $('#trlist').on('click','.removeClass',function(){
                    removeSingleRow(this);
                })
            });
            // 获取默认的一行tr，用作复制
            var trlisthtml = $("#trlist").html();
            /**
             * 增加
             */
            function addRow() {
                // 向tbody最后添加一行tr.
                $(".table>tbody:last").append(trlisthtml); 
            }
            /**
             * 移除单行
             */
            function removeSingleRow(that) {
                // 移除当前行 that 的父级是td，td的父级是tr，然后删除tr就ok了
                    $(that).parent().parent().remove(); 
            }
            /**
             * 移除多行
             */
            function removeMultipleRows() {
                // 移除当前行 checkbox的父级是td，td的父级是tr，然后删除tr。就ok了。用each，选择多行遍历删除
                $('input[name="checkbox"]:checked').each(function() {
                    $(this).parent().parent().remove(); 
                });
            }
        </script>
    </body>
</html>

-----------------------------------------------------------------------------

on()方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）

$('#trlist').on('click','.removeClass',function(){
removeSingleRow(this);
})

on前面的这个#trlist一定要是html中存在的，静态的,否则点击事件触发不了

".removeClass"是动态加载出来的内容，它的class=".removeClass"

on方法在什么条件下都是成立的

用jquery:为动态加载的元素添加点击事件其实也可以用

$(".removeClass").click(function(){
});

只不过是有限制的，这个点击事件要和动态加载的内容在同一作用域中才行

jquery2.x 动态绑定事件

猜你喜欢