使用jQuery时出现$window.load错误

Question

我有以下代码在文档就绪事件中工作：

jQuery(document).ready(function($) {

    $('tr[data-name="background_colour"] input.wp-color-picker').each(function() {

        //this works
        $(this).closest('tr').siblings('tr[data-type="wysiwyg"]').css('background-color', this.value);

        //this doesn't because frames are not loaded
        $(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', this.value);
    });
});

成功地更改了tr的背景色，但没有更改iframe的body，因为所有iframes都是动态创建的，文档准备就绪时还没有完全加载它们。

因此，我尝试使用window.load，如下所示：

jQuery(window).load(function($) {

    $('tr[data-name="background_colour"] input.wp-color-picker').each(function() {

        //this works
        $(this).closest('tr').siblings('tr[data-type="wysiwyg"]').css('background-color', this.value);

        //this doesn't because frames are not loaded
        $(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', this.value);
    });
});

但是当我这么做的时候，我把Uncaught TypeError: object is not a function放在了下面的线上：

$('tr[data-name="background_colour"] input.wp-color-picker').each(function() {

多亏了古法的回答。以下是对其他人可能有帮助的正确代码：

jQuery(window).load(function() {

    jQuery(function($){

        $('tr[data-name="background_colour"] input.wp-color-picker').each(function() {
            $(this).closest('tr').siblings('tr[data-type="wysiwyg"]').css('background-color', this.value);

            $(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', this.value);
        });
    });
});

Answer 1

ready事件处理程序是以jQuery对象作为参数调用的，但load事件处理程序不是。

由于$作为load事件处理程序的参数，它将包含事件对象，而不是jQuery对象。当您试图像使用jQuery对象一样使用事件对象时，您将得到一个错误。

从load事件处理程序中删除该参数，以便您可以从全局范围访问$变量：

jQuery(window).load(function() {