在所有 $(document).ready() 运行之后，是否有事件发生？

Question

我有一个包含在页面 index.php 中的 first.js 文件，它有这样的内容：

$(function(){

    $("#my_slider").slider("value", 10);

});

而且它们在 index.php 中有一些动态创建的滑块：

<?php function slidders($config, $addon)
{
    $return = '
    <script type="text/javascript">
        $(function() {
            $("#slider_'.$addon['p_cod'].'").slider({
            min: '.$config['min'].',
            max: '.$config['max'].',
            step: '.$config['step'].',
            slide: function(event, ui) {
                $("#cod_'.$addon['p_cod'].'").val(ui.value);
                $(".cod_'.$addon['p_cod'].'").html(ui.value+"'.@$unit.'");
            },
            change: function(event, ui) { 
                $("#cod_'.$addon['p_cod'].'").change();
            }
        });
            $("#cod_'.$addon['p_cod'].'").val($("#slider_'.$addon['p_cod'].'").slider("value"));
            $(".cod_'.$addon['p_cod'].'").html($("#slider_'.$addon['p_cod'].'").slider("value")+"'.@$unit.'");
    });
    </script>';
    return $return;
} ?>

问题是，因为我的 index.php 滑块在我的 first.js 之后被实例化，所以我无法在那里设置一个值，是否有任何事件像“毕竟 $(document).ready() 已经运行”我可以在 first.js 中使用它来操作在 index.php 中创建的滑块吗？

Answer 1

不知道如何判断最后一个$(document).ready() 函数何时触发，但$(window).load() 函数在$(document).ready() 之后触发

Answer 2

最安全的做法是调用$(window).load() inside $(document).ready()。这将通过确保在所有 $(document).ready() 脚本完成之前不会将您的最后运行代码传递给 $(window).load() 来保持所有情况下的执行顺序。如果没有这个，在某些浏览器中可能会出现竞争条件，其中$(window).load() 可能会在所有$(document).ready() 脚本启动之后但在所有$(document).ready() 脚本完成之前被调用。

$(document).ready(function() {
    $(window).load(function() {
        // this code will run after all other $(document).ready() scripts
        // have completely finished, AND all page elements are fully loaded.
    });
});

Answer 3

根据 Ian 的回答，我发现了这一点（经过测试 - 工作）：

jQuery(document).ready(function() {
    jQuery(document).ready(function() {
        /* CODE HERE IS EXECUTED AS THE LAST .ready-CALLBACK */
    });
});

当然，这是因为就绪回调是按照它们分配的顺序调用的。目前，当您的外部就绪回调被调用时，所有其他脚本应该已经分配了它们的就绪回调。因此，现在分配您的就绪回调（内部回调）将导致您成为最后一个。

Answer 4

试试这个巧妙的技巧/粗俗的技巧：

$(function(){
    $(function(){

        $("#my_slider").slider("value", 10);

    });
});

看起来很愚蠢对吧？它之所以有效，是因为 jQuery 按照添加的顺序执行事件处理程序。在你的事件处理程序中添加一个事件处理程序是尽可能晚的（只要确保你没有在任何滑块上意外地这样做；这很容易做到）。

概念证明。 http://jsfiddle.net/9HhnX/

Answer 5

jQuery 的 $(document).ready() 函数的目标之一是标准的 javascript window.onload 事件在页面上的所有内容（包括图像等）被加载之前不会运行，即使函数可以有用地在此之前开始运行。所以 $(document).ready() 会在构建 DOM 层次结构后立即运行。

鉴于此，一种选择是在页面加载时运行“在所有其他事情之后”脚本。不过，这并不能保证所有 $(document).ready() 脚本都已完成。

一个更好但更复杂的选择是创建一个检查滑块是否存在的函数，如果它们不存在，则对其自身调用“setTimeout”，因此它可以等待几毫秒并重试。

（要回答您的具体问题，不，没有“毕竟 $(document).ready() 已经运行”回调。）

Answer 6

你最好为你的滑块添加一个独特的类而不是#my_slider，因为它只会触发 id = my_slider 的元素。

如果你想拥有相同的功能，你应该从 jquery 中签出 .live，它会将相同的功能放在绑定后添加的元素上。

如果这对您不起作用，那么当您添加新滑块时，您将不得不在 DOM 中遍历它们并调用必要的函数。