javascript - jQuery绑定长度变化

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 中，这将在 some 中/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那些包装在$()IE 中的元素，即 jQuery 对象。

例如：

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

而且，.length不返回 jQuery 对象。所以你不能使用.change()with.length并且它根本不需要。