Question

我有下表：

<table class="table table-striped" id="table_tran">
    <thead>
        <th>Transformations</th>

    </thead>
        <tbody>

            <tr>
        </tbody>
    </table>

当用户执行某些操作时，此表填充了生成的tds。我想要的是当用户单击生成的td以显示他单击的td的文本时。我正在使用以下javascript代码：

$("#table_tran td").on("click",function(){
    alert($(this).html())
});

此代码不适用于生成的tds.Any想法？如果我使用它：

 <table class="table table-striped" id="table_tran">
        <thead>
            <th>Transformations</th>

        </thead>
            <tbody>

                <tr><td>fxfjjf</td>
            </tbody>
        </table>

该代码仅适用于td“fxfjjf”

Answer 1

问题是当您尝试绑定click事件时，td不存在。所以你需要事件委托。你很亲密。

更改

$("#table_tran td").on("click",function(){...

要

$("#table_tran").on("click","td",function(){...

每次单击表时都会触发该事件。并将检查＆＃34; td＆＃34;查看它是否匹配的参数，如果是，则会根据需要触发回调。

Answer 2

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

在动态创建表格单元格时。

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

将您的代码更改为

$("#table_tran").on("click", "td", function(){
    alert($(this).html())
});

.on（＆＃34;点击＆＃34;）不会对生成的td起作用

2 个答案: