jQuery运行脚本后答案

【问题标题】：jQuery run script afterjQuery运行脚本后
【发布时间】：2011-08-16 05:50:48
【问题描述】：

我有一个js动作的负载问题，我有这两行：

$(".sorter td:first-child").css("width", "13px");
$(".sorter td:last-child").css("text-align", "center").css("padding", "0").css("line-height", "0").css("width", "65px");

这个工作正常...但是当我转到 tablesorter 寻呼机插件的第二页时，它不会再次加载。

截图： a busy cat http://www.dreamwire.nl/Cleanished/error.jpg

有人可以帮我解决这个问题吗？这就是我所拥有的所有 JS：

var $sorterTable = $(".sorter");
var tablesorterConfig = { widgets: ['zebra'], headers:{ 0:{sorter:false} } };
tablesorterConfig.headers[$sorterTable.find("thead th").length - 1] = { sorter:false };

$sorterTable
.tablesorter(tablesorterConfig)          
.tablesorterPager({container: $("#pager"), positionFixed: false, size : 5 });

$(".sorter td:first-child").css("width", "13px");
$(".sorter td:last-child").css("text-align", "center").css("padding", "0").css("line-height", "0").css("width", "65px");

【问题讨论】：

$(".sorter td:last-child").css("text-align", "center").css("padding", "0").css("line-height", "0").css("width", "65px"); 可以缩短为：$(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": "65px"});

标签： jquery plugins pagination tablesorter

【解决方案1】：

2.0.7 版的 Tablesorter 插件包括 pagerChange 和 pagerComplete 事件。如果您正在使用此版本（或者如果您可以升级），您可以在 pagerComplete 事件中重新应用您的样式。 http://mottie.github.com/tablesorter/docs/#Events

$(".sorter").bind('pagerComplete', function() {
    // reapply styles here...
    $(".sorter td:first-child").css("width", "13px");
    $(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": "65px"});
});

【讨论】：

【解决方案2】：

所有这些脚本所做的就是设置样式。为什么不把它们放在你的样式表中呢？

.sorter td:first-child {
    width: 13px;
}
.sorter td:first-child + td + td + td + td + td {
    text-align: center;
    padding: 0;
    line-height: 0;
    width: 65px;
}

【讨论】：

因为 last-child 不能在 CSS 中使用 IE 6、IE 7 和 IE 8。
@Maanstraat - 请参阅我的答案中的代码示例。您可以使用 first-child 和相邻的兄弟选择器，在没有 last-child 选择器的情况下执行此操作。这些是 CSS2 选择器，适用于旧版浏览器。

【解决方案3】：

您还需要在点击寻呼机后设置这些 CSS 样式。试试这个

var $sorterTable = $(".sorter");
var tablesorterConfig = { widgets: ['zebra'], headers:{ 0:{sorter:false} } };
tablesorterConfig.headers[$sorterTable.find("thead th").length - 1] = { sorter:false };

$sorterTable
.tablesorter(tablesorterConfig)          
.tablesorterPager({container: $("#pager"), positionFixed: false, size : 5 });

$("#pager").click(function(){
  $(".sorter td:first-child").css("width", "13px");
  $(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": "65px"});
});

$(".sorter td:first-child").css("width", "13px");
  $(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": "65px"});

【讨论】：

嗨 ShankarSangoli，我已经把它放进去了，但它不起作用。 :-(.. 这是有效的：$("#pager .first, #prev .last, #pager .next, #pager .last,, #pager select").click(function(){ 当您选择更多行时，只有选择框不会更新。
尝试将其更改为 $("#pager img").click(function(){ $(".sorter td:first-child").css("width", "13px") ; $(".sorter td:last-child").css({"text-align": "center","padding": "0", "line-height": "0", "width": " 65px"}); });