I am very newer to JQuery, beg U pardon.
While, in every table row I have two link button :
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
And I click "up" the table row <tr> will move up, the "down" is same
move down.
But, I add a row into table use append string to table, like
following:
$("#btn_add").click(function(){
$("#myTable tbody").append("<tr><td>5Five</td><td>Five<input
type='text' name='tb_class'></td><td>Five</td><td><a href='#'
class='up'>Up</a> =<a href='#' class='down'>Down</a></td></tr>");
});
The appended table row, can not response the even, where I click the
"up" and "down" link.
How to make the appended table-row bind the click even?
Thanks in advance, All source is below...
==============================================
<!doctype html>
<head>
<title>Test</title>
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
$("#btn_show").click(function(){
var $myTable = $("#myTable");
$myTable.find("tr").each(function(i){
alert($(this).find("input").val()+"=="+i);
});
});
$("#btn_add").click(function(){
$("#myTable tbody").append("<tr><td>5Five</td><td>Five<input
type='text' name='tb_class'></td><td>Five</td><td><a href='#'
class='up'>Up</a> =<a href='#' class='down'>Down</a></td></tr>");
});
$("#btn_get_one").click(function(){
var $myTable = $("#myTable");
$myTable.find("tr").each(function(i){
alert($(this).find("input").val()+"=="+i);
});
});
});
</script>
</head>
<body>
<div class="demo-description">
<input id="btn_show" type="submit" name="Submit" value="show the
order">
<input id="btn_add" type="submit" name="Submit" value="add a row">
<input id="btn_get_one" type="submit" name="Submit" value="get first
row">
<br><div id="info">hell</div>
<br>
<table id="myTable">
<tbody>
<tr>
<td>1One</td>
<td>Type
<input type="text" name="tb_class" value="mead"></td>
<td>IsDisplay<input name="cb_is_show" type="checkbox" value=""></td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>2Two</td>
<td>Two
<input type="text" name="tb_class" value="lai"></td>
<td>Two
<input name="cb_is_show" type="checkbox" value=""></td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>3Three</td>
<td>Three
<input type="text" name="tb_class" value="princess"></td>
<td>Three</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End demo-description -->
</body>
</html>
