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動的バインディングイベント

おすすめ