javascript - 动态添加的 dom 元素不响应 jQuery 函数

Question

考虑以下代码:

            $(document).ready(function(){

                var table1 = $("table").eq(0);
                var row_list;
                var rows;
                var x;
                var y;

                $("#mybutton").click(function(){

                    row_list = table1.find("tr");
                    rows = row_list.length;
                    x = $("#field_x").val();
                    y = $("#field_y").val();

                    if(x>rows || y>rows){

                         var num;   
                         if(x>y) num=x;
                         else num=y;
                         var n = num-rows;    
                         var row; table1.find("tr").eq(0).clone();

                         while(1){
                            row = table1.find("tr").eq(0).clone();
                            table1.append(row);
                            n--;
                            if(n===0) break;
                         }

                         n = num-rows;    
                         var td;

                         while(1){
                            td = table1.find("td").eq(0).clone();
                            table1.find("tr").append(td);
                            n--;
                            if(n===0) break;
                         }

                    }

                    var text = $("#text").val();
                    var css = $("#css").val();
                    $("table:eq(0) tr:eq(" + (x-1) + ") td:eq(" + (y-1) + ")").text(text).css("color", css);

                });


                table1.find("td").click(function(){
                    $(this).html("");
                });


            });

            * {
                font: 14px normal Arial, sans-serif;
                color: #000000;
            }
            table {
                margin: 50px auto;
            }
            table, td {
                border: 1px solid #aaa;
                border-collapse: collapse;
            }
            th {
                padding: 10px;
                font-weight: bold;
            }
            td {
                background-color: #eeeeee;
                width: 80px;
                height: 80px;
            }
            table:first-child tr td {
                cursor: pointer;
            }
            td[colspan="4"]{
                text-align:center;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th colspan="4">Fill a field:</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Text: <br/><input type="text" id="text" value=""></td>
                    <td>Field X: <br/><input type="text" id="field_x" value=""></td>
                    <td>Field Y: <br/><input type="text" id="field_y" value=""></td>
                    <td>CSS: <br/><input type="text" id="css" value=""></td>
                </tr>
                <tr>
                    <td colspan="4"><button id="mybutton">Fill</button></td>
                </tr>
            </tbody>
        </table>

程序的作用如下:

用户可以通过给出 x 值和 y 值来选择一个字段。在此字段中，显示带有标签“文本”的输入字段的内容。- 程序的这一部分工作正常。

如果用户选择的 x 值或 y 值大于当前行(列)数，则添加行和列，直到行/列数等于 x-(或y-) 字段。- 程序的这一部分也可以正常工作。

唯一不起作用的功能如下:如果用户单击表中的非空字段之一，表的内容应该返回到其自然(空)状态。

为此，代码中添加了以下函数(请参阅代码的 javascript 部分的最后几行):

table1.find("td").click(function(){
         $(this).html("");
});

这段代码基本意思是:如果用户点击表格中的任何框(“td”)，该框的内容应该消失。

这或多或少是代码中最简单的部分。但这也是行不通的一方面。更准确地说:它适用于原始盒子，但不适用于添加的任何盒子。 - 我不明白为什么它会这样。

Answer 1

如果您正在向 DOM 动态添加元素并希望将事件附加到它们，您应该考虑通过 on() 使用事件委托(delegate)。功能:

// This will wire up a click event for any current AND future 'td' elements
$(table1).on('click', 'td', function(){
     $(this).html("");
});

简单地使用 click()它自己只会为调用该函数时存在于 DOM 中的元素连接必要的事件处理程序。