我试图建立一个改变标签的颜色/布局脚本在标签页面中的用户的堆栈溢出 -profile部分。

I'm trying to build a script that alters the coloring/layout of tags on the tag page in the user-profile section of Stack Overflow.

我测试脚本，它运行。问题是，我想重新运行它，当我点击排序选项[票]和[名称的。

I tested the script and it runs. The problem is that I would like to re-run it when I click on the sort options [votes] and [name].

我曾尝试：

触发关闭的jQuery 就绪事件。 在安装悬挂的onclick 处理程序（这是无用的，因为它的页面重新加载之前运行）。 附加一个负荷事件监听器表的标签等，都无济于事。 Triggering off the jQuery ready event. Attaching an onclick handler (which is useless since it runs before the page reloads). Attaching a load event listener to the table with the tags, etc., to no avail.

我敢肯定，我失去了一些东西很明显这里。我怀疑，有一些涉及异步重装，但我不明白什么是必要的行动，使这项工作是。

I am sure I am missing something very obvious here. I suspect that there is some async reload involved, but I can't understand what the required action to make this work is.

谁能解释我缺少的是什么（或点我的一些文档解释了吧）？

Can anyone explain what I am missing (or point me to some documentation that explains it)?

推荐答案

这是一个常见的​​问题。该网页使用AJAX来取代其内容的一部分。因此引发断jQuery的就绪事件不会工作，因为在最初，满页面加载，只有火灾。

This is a common problem. That page is using AJAX to replace just part of its content. Therefore triggering off of jQuery's ready event won't work, as that only fires after the initial, full page load.

下面是通常的解决方法/方​​法，以供参考。我只推荐第一个：

Here are the usual workarounds/approaches for reference. I only recommend the first one:

使用一个强大的查询工具如 waitForKeyElements（）。这需要加载外部脚本（通常不会有问题），它需要jQuery的，你应该使用反正。这种方法详述如下。

Use a robust polling utility like waitForKeyElements(). This requires loading an external script (not normally a problem), and it requires jQuery, which you should be using anyway. This approach is detailed below.

引发的 hashchange 事件。有些是好的，足以触发此事件时AJAX改变页面。不幸的是，堆栈溢出不是那些有礼貌的网站之一。 ; - ）

Trigger off the hashchange event. Some pages are nice enough to fire this event when AJAX changes the page. Unfortunately, Stack Overflow is not one of those "polite" sites. ;-)

引发其他变化的URL。有些是好的足以改变URL时AJAX改变内容。堆栈溢出的不会做到这一点。 不幸的是，网址，SO的情况下立即发生变化，而变量（UN predictable）延迟后发生的实际网页的变化。这意味着你也必须使用其他方法之一。

Trigger off other changes to the URL. Some pages are nice enough to change the URL when AJAX changes the content. Stack Overflow does do this. Unfortunately, the URL changes immediately in SO's case, while the actual page changes occur after a variable (unpredictable) delay. Meaning you must also use one of the other techniques.

截取网页的AJAX。这可以变得复杂和凌乱，而且往往次投票或延迟仍然是必要的，因为AJAX请求完成后可能会出现实际的页面变化的可变间隔。确定正确的AJAX请求，出了多种类型的页面可能使，也可以讨厌。

Intercept the page's AJAX. This can get complicated and messy, and often times a poll or delay is still needed, as the actual page changes may occur a variable interval after the AJAX request has finished. Identifying the correct AJAX request, out of the many types the page may make, can also be tiresome.

使用 MutationObserver 秒。这可能是最强大的技术，并更改驱动与查询。但它是大材小用在大多数情况下，可能会非常棘手实现，而且可以冻结与CPU峰值电脑。

Use MutationObservers. This can be the most powerful technique, and is change driven versus polling. But it's overkill in most situations, can be tricky to implement, and can "freeze" computers with CPU spikes.

需要注意的是较旧的技术，突变事件的，是pcated有充分的理由已经过时，德$ P $。不要尝试使用它，尽管有些浏览器并没有删除这个功能呢。

Note that an older technique, Mutation Events, is obsolete and deprecated for good reasons. Do not attempt to use it, although some browsers haven't removed this functionality yet.

在对阵阿贾克斯驱动的网页，几乎所有的脚本，我们真正想要的是作用于特定类型的内容。艺术是确定的内容，那么它很容易使用像 waitForKeyElements一个实用程序（）火每当我们目标的有效负载被添加或替换。

In almost all scripting against AJAX-driven pages, all we really want is to act on certain kinds of content. The art is to identify that content, then it's easy to use a utility like waitForKeyElements() to fire whenever our targeted payload is added or replaced.

在你的情况下，出现的内容是出现在这个HTML标签列表：

In your case, the content appears to be the tag listing which appears in this HTML:

<div id="user-tab-tags">
    ...
    <div class="user-tab-content">
        <table class="user-tags">
            ...
        </table>
    </div>
    ...
</div>

使用 table.user-标签被替换每次更改标签的排序/分页选项的时间。

With table.user-tags being replaced every time you change that tab's sort/pagination options.

所以，jQuery选择的内容将是：

So the jQuery selector for that content would be:

"#user-tab-tags div.user-tab-content table.user-tags"

和一个完整的脚本以改变造型是：

// ==UserScript==
// @name     _AJAX_compensation techniques
// @include  http://stackoverflow.com/users/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (
    "#user-tab-tags div.user-tab-content table.user-tags",
    customStyleUserTags
);

function customStyleUserTags (jNode) {
    jNode.css ("background", "lime");
    //***** YOUR CODE HERE *****
}