javascript - 动态创建的点击事件

Question

我有下表，它是在开始时使用 onload 函数动态创建的。

<div id="first">
<table class="joma" id="joma">
<tbody>
<tr>
   <th>Id</th>
   <th>V No</th>
   <th>Biboron</th>
   <th>Taka</th>
</tr>
<tr><td class="rid">1</td><td>sss</td><td>222</td><td class="cv">4</td></tr>
<tr><td class="rid">2</td><td>xxx</td><td>2333</td><td class="cv">4</td></tr>
</tbody>
</table>
</div>

现在我需要能够单击<td class="rid">哪个应该给出相应的值。在这种情况下 1 或 2。

我该怎么做呢？

我使用了以下方法：

$(document).ready(function() {
    $('.rid').click(function() {
        alert(this);
    });
});



$('.rid').click(function() {
    alert(this);
});

我对此一无所获。

Answer 1

使用.on()

$(document).on('click','.rid',function() {
     alert("this");
});

页面加载时创建.rid的 DOM 不是页面的一部分。

所以你不能直接访问它们，你必须使用event delegation

Answer 2

使用事件委托：

$(document).on('click', '.rid', function() {
    alert("this");
});

.rid在页面加载时不存在，因此将其绑定到确实存在的元素（通常是您添加内容的容器，但由于我没有看到，document因此是一个安全的选择）。

Answer 3

$(document).ready(function() {
    $('.rid').click(function() {
        alert($(this).html());
    });
});

小提琴：http: //jsfiddle.net/yraQS/