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

Question

所以基本上如果DOM中已存在行，那么上下移动行的工作完全正常，但是行使用jquery附加行并尝试上下移动它不起作用。

$(".addmore").on('click',function(){
	count=$('table tr').length;
	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>
						
<table>
  <thead>
    <tr>							    
      <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>							  	

请运行以上示例，因为它会清楚地解释。

在此示例中，您可以看到行ID 1正在向上和向下移动，因为它已经存在于表中但是如果我添加更多行，则移动它们不起作用。

Answer 1

如果您使用以下内容，它甚至可以使用新添加的元素。

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

＆＃13;

＆＃13;

$(".addmore").on('click',function(){
	count=$('table tr').length;
	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());
  }
});

＆＃13;

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

<button type="button" class='addmore'>+ Add Row</button>
						
<table>
  <thead>
    <tr>							    
      <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>

＆＃13;

＆＃13;

＆＃13;