点击事件 <td> 动态创建

Question

I have the following table which is created dynamically using a onload function at the beginning.

<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>

Now I need to be able to click the <td class="rid"> which should give the the corresponding value. in this case 1 or 2.

How do I do this?

I have used the following methods:

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



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

I am not getting anything with this.

Answer 1

Use .on()

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

when page loaded DOM is created .rid is not the part of the page.

So you can not access them directly you have to use event delegation

Answer 2

Use event delegation:

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

.rid doesn't exist on page load, so bind it to an element that does exist (usually the container to where your appending the content, but since I didn't see one, document is a safe bet).

Answer 3

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

the fiddle : http://jsfiddle.net/yraQS/