2013-03-27 63 views
0

我有一张表,当用户更改一行中的ID时,我必须根据这个新ID将行重新定位到新的位置。jQuery如何防止事件内部的事件功能

所以我创建了一个更改函数来管理这个,但是在我的代码中,当移动行时,我再次触发更改。

有一种方法可以在移动时不触发更改,或者我必须以不同方式触发更改?

任何想法?

HTML代码:

<table id='eap'> 
    <tr><th>ID</th><th>INFO1</th><th>INFO2</th></tr> 
    <tr><td><input name="ID1" value='1'/></td><td>1.1</td><td>1.2</td></tr> 
    <tr><td><input name="ID2" value='2'/></td><td>2.1</td><td>2.2</td></tr> 
    <tr><td><input name="ID3" value='3'/></td><td>3.1</td><td>3.2</td></tr> 
    <tr><td><input name="ID4" value='4'/></td><td>4.1</td><td>4.2</td></tr> 
    <tr><td><input name="ID5" value='5'/></td><td>5.1</td><td>5.2</td></tr> 
</table> 

jQuery代码:

$('#eap tbody tr input[name^="ID"]').change(function() { 
    alert('start'); 

    //changed row 
    var $row = $(this).closest('tr'); 

    //New ID 
    var $newID = this.value; 

    //Loop all in search for the correct ID position 
    $('#eap tr input[name^="ID"]').each(function (i){ 
     if ((parseInt($newID) <= parseInt($(this).val())) && $row.index() != $(this).closest('tr').index()){ 
      //found position 
      $newrow = $(this).closest('tr'); 

      //move row 
      //this trigger change again 
      $($newrow).before($($row)); 

      return false; 
     } 
    }); 

    //put id in order 
    $id=1; 
    $('#eap tr input[name^="ID"]').each(function (i){   
     $(this).val($id); 
     $id++;       
    });   
}); 

Demo on JSFIDDLE

+0

在你的Firefox的jsfiddle更改只触发一次(警报只显示一次) – 2013-03-27 21:16:36

+0

你是对的。该问题发生在Chrome上。 – 2013-03-28 00:26:59

回答

1

我希望我理解你。我会使用blur事件而不是change事件。

$('#eap tbody tr input[name^="ID"]').blur(function() { 
... 
+0

但我必须等待用户输入完整的ID。使用键控,如果ID是100,当用户数字1时该行会改变,不? – 2013-03-27 21:17:02

+2

看看我的更新。 – 2013-03-27 21:17:34

+1

是的,模糊是最好的选择。 – 2013-03-27 21:19:54