Question

我有一个由Ajax更新的表。我想在添加新数据时做一些事情，但由于更改是在外观上，它应该由预加载的JS而不是Ajax返回JS来完成。

我正在寻找像$('table tr').length.change( ... )这样的东西，所以我可以做这样的事情

$('table tr').length.change( function() {
  if ($('table tr').length>1) $('table').show() else $('table').hide()
}

Ajax返回的JS会做这样的事情（比如在Rails中）

$('table').append('<tr> <td><%= @person.name %></td> <td><%= @person.age %></td> </tr>')

（在Rails中，这将在某些/app/views/container_name/method_name.js.erb）

Answer 1

您可以使用pub-sub方法。

$('table')
   .append('<tr> <td><%= @person.name %></td> <td><%= @person.age %></td> </tr>')
   .trigger('tableModified');

然后在你的布局/设计中，

$('table').on('tableModified',function(){
    if ($('tr', this).length>1) $(this).show() else $(this).hide()
});

这样，您的表格代码不必了解您的布局/设计或修改表格时可能需要知道的任何其他内容。

Answer 2

我在类似情况下以项目方式使用了一个名为watch的jQuery插件。我必须跟踪更多属性，但它对我很有用：

http://darcyclarke.me/dev/watch/

Answer 3

在append语句之后尝试show-hide语句。

$('table')
   .append('<tr> <td><%= @person.name %></td> <td><%= @person.age %></td> </tr>');

if( $('table tbody tr').length > 1 ) {
   $('table').show();
} else {
   $('table').hide()
}

注意：

$('table tr').length.change(..)不是有效的方法。因为，.change()在一个事件处理程序中，适用于input, select元素包含在$()内的事件，即jQuery对象。

例如：

$('select').change()`, `$('input').change()

此外，.length不返回jQuery对象。因此，您无法将.change()与.length一起使用，而根本不需要它。

jQuery绑定更改长度

3 个答案: