Give live ago instead of click.
something like:
$(document).ready(function(){
$(".up,.down").live("click",function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
Jon
2009/10/21 Mead Lai <laiqi...@gmail.com>:
>
> 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>
>
