Javascript 动态添加的dom元素不响应jQuery函数_Javascript_Jquery_Dom

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

javascript jquery dom

Javascript 动态添加的dom元素不响应jQuery函数,javascript,jquery,dom,Javascript,Jquery,Dom,考虑以下代码： $（文档）.ready（函数（）{ var表1=$（“表”）.eq（0）；变量行列表； var行； var x；变量y； $（“#我的按钮”）。单击（函数（）{ 行列表=表1.查找（“tr”）；行=行\列表长度； x=$（“#字段_x”）.val（）； y=$（“#字段_y”）.val（）；如果（x>行| | y>行）{ var-num；如果（x>y）num=x； else num=y； var n=行数；变量行；表1.find（“tr”）.eq（0.clone（）

考虑以下代码：

$（文档）.ready（函数（）{
var表1=$（“表”）.eq（0）；
变量行列表；
var行；
var x；
变量y；
$（“#我的按钮”）。单击（函数（）{
行列表=表1.查找（“tr”）；
行=行\列表长度；
x=$（“#字段_x”）.val（）；
y=$（“#字段_y”）.val（）；
如果（x>行| | y>行）{
var-num；
如果（x>y）num=x；
else num=y；
var n=行数；
变量行；表1.find（“tr”）.eq（0.clone（）；
而(1){
行=表1.find（“tr”）.eq（0）.clone（）；
表1.追加（行）；
n--；
如果（n==0）中断；
}
n=行数；
var-td；
而(1){
td=table1.find（“td”）.eq（0.clone（）；
表1.查找（“tr”）。追加（td）；
n--；
如果（n==0）中断；
}
}
var text=$（“#text”）.val（）；
var css=$（“#css”）.val（）；
$（“表：eq（0）tr:eq（“+（x-1）+”）td:eq（“+（y-1）+”）。text（text）.css（“color”，css）；
});
表1.查找（“td”）。单击（函数（）{
$（this.html（“”）；
});
});
*{
字体：14px标准Arial，无衬线；
颜色：#000000；
}
桌子{
保证金：50px自动；
}
表，td{
边框：1px实心#aaa；
边界塌陷：塌陷；
}
th{
填充：10px；
字体大小：粗体；
}
运输署{
背景色：#eeeeee；
宽度：80px；
高度：80px；
}
表：第一胎tr td{
光标：指针；
}
td[colspan=“4”]{
文本对齐：居中；
}

填写字段：
文本：

字段X:

字段Y:

CSS:

填满
< /代码> 如果您动态地将元素添加到DOM并期望将事件附加到它们上，则应考虑通过函数：使用事件委托：
// This will wire up a click event for any current AND future 'td' elements
$(table1).on('click', 'td', function(){
     $(this).html("");
});

简单地使用它自己的意志只会为在调用函数时DOM中存在的元素提供必要的事件处理程序。
 < P>如果您动态地将元素添加到DOM并期望将事件附加到它们上，则应该考虑通过事件函数使用事件委托：
// This will wire up a click event for any current AND future 'td' elements
$(table1).on('click', 'td', function(){
     $(this).html("");
});

单独使用只会为调用该函数时DOM中存在的元素连接必要的事件处理程序。
在用户有机会输入任何数据之前，您正在分配事件处理程序。这意味着，如果添加了额外的行或列，则新的
需要手动添加事件处理程序
或者，您可以向整个表中添加一个单击处理程序：
table 1.单击（函数（ev）{$（ev.target）.html（“”）；}

ev.currentTarget
属性将是
元素，因为该元素是事件处理程序注册到的元素，但是ev.target
属性将是您正在查找的
元素
这里有一个可以尝试的方法。
在用户有机会输入任何数据之前，您正在分配事件处理程序。这意味着如果添加了额外的行或列，则新的
需要手动添加事件处理程序
或者，您可以向整个表中添加一个单击处理程序：
table 1.单击（函数（ev）{$（ev.target）.html（“”）；}

ev.currentTarget
属性将是
元素，因为该元素是事件处理程序注册到的元素，但是ev.target
属性将是您正在查找的
元素
这里有一个实验。
嘿，这是我认为答案可能是
HTML文件：
<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <meta charset="UTF-8" />
        <style>
            * {
                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;
            }

            .pre-height {
                min-height: 80px;
            }
        </style>
    </head>
    <body>
        <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 class="pre-height"></td>
                    <td class="pre-height"></td>
                    <td class="pre-height"></td>
                    <td class="pre-height"></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>

        <script src="jquery.min.js"></script>
        <script src="jack.js"></script>

    </body>
</html>


* {
字体：14px标准Arial，无衬线；
颜色：#000000；
}
桌子{
保证金：50px自动；
}
表，td{
边框：1px实心#aaa；
边界塌陷：塌陷；
}
th{
填充：10px；
字体大小：粗体；
}
运输署{
背景色：#eeeeee；
宽度：80px；
高度：80px；
}
表：第一胎tr td{
库索