如何使用jQuery向上或向下移動附加行

Question

因此，基本上，如果行已經存在於DOM中，那麼它們上下移動行可以很好地工作，但行使用jquery附加行並嘗試向上和向下移動它不起作用。

$(".addmore").on('click',function(){ 
 
\t count=$('table tr').length; 
 
\t var data="<tr><td>"+count+"</td>"; 
 
     data+="<td><a class='down' href='#'>Down</a> <a class='up' href='#'>Up</a></td>"; 
 
    $('table').append(data); 
 
}); 
 

 

 
$(".up,.down").click(function() { 
 
    var $element = this; 
 
    var row = $($element).parents("tr:first"); 
 
    if($(this).is('.up')){ 
 
    row.insertBefore(row.prev()); 
 
    } 
 
    else{ 
 
     row.insertAfter(row.next()); 
 
    } 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button" class='addmore'>+ Add Row</button> 
 
\t \t \t \t \t \t 
 
<table> 
 
    <thead> 
 
    <tr> \t \t \t \t \t \t \t  
 
     <th>ID</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
    <td>1</td> 
 
     <td><a class="down" href="#">Down</a> <a class="up" href="#">UP</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table> \t \t \t \t \t \t \t \t

請運行上面的例子，因爲它會解釋清楚。

在這個例子中，你可以看到行ID是完美地上下移動，因爲它已經存在於表中，但是如果我添加更多的行然後移動它們不起作用。

Answer 1

如果您使用以下內容，即使是新添加的元素也可以使用。

$("table").on("click",".up,.down", function {}); 

$(".addmore").on('click',function(){ 
 
\t count=$('table tr').length; 
 
\t var data="<tr><td>"+count+"</td>"; 
 
     data+="<td><a class='down' href='#'>Down</a> <a class='up' href='#'>Up</a></td>"; 
 
    $('table').append(data); 
 
}); 
 

 

 
$("table").on("click",".up,.down", function() { 
 
    var row = $(this).parents("tr:first"); 
 
    if($(this).is('.up')){ 
 
    row.insertBefore(row.prev()); 
 
    } 
 
    else{ 
 
    row.insertAfter(row.next()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button" class='addmore'>+ Add Row</button> 
 
\t \t \t \t \t \t 
 
<table> 
 
    <thead> 
 
    <tr> \t \t \t \t \t \t \t  
 
     <th>ID</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
    <td>1</td> 
 
     <td><a class="down" href="#">Down</a> <a class="up" href="#">UP</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>