强制 jQuery 就绪块在所有其他就绪块之后运行答案

【问题标题】：forcing a jQuery ready block to run after all other ready blocks强制 jQuery 就绪块在所有其他就绪块之后运行
【发布时间】：2010-12-05 16:08:48
【问题描述】：

是否有可能在所有其他块都执行完之后执行一个 jQuery 就绪块。

我的母版页中有这个...

<script type="text/javascript">
    $(document).ready(function()
    {
        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
</script>

这在我的其他页面之一...

<script type="text/javascript">
    $(document).ready(function()
    {
        $('textarea.message-body').wysiwyg();
    });
</script>

我看到的问题是第一个块在第二个块之前执行，这导致 tab 键出现问题。发生的情况是，当我按下 Tab 键时，键盘焦点转到浏览器中的地址栏。我稍微更改了代码，以便在我的母版页中包含它...

<script type="text/javascript">
    $(document).ready(function()
    {
        var bodies = $('textarea.message-body');
        if (bodies.length > 0)
        {
            bodies.wysiwyg();
        }

        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
</script>

并完全取消另一个就绪块。这样做可以使 tab 键正常工作，并将焦点设置在我的 textarea 上。

我宁愿在我的母版页中没有特定于页面的代码。

那么，有没有办法让我的文本框聚焦代码在所见即所得代码之后运行？

【问题讨论】：

标签： jquery

【解决方案1】：

你只在母版页上注册一个document.ready()，然后让那个基于变量执行代码怎么样？这个解决方案不是那么优雅，但是对 JavaScript 线程同步的搜索并没有真正实现任何操作。

您可以将母版页上的代码更改为：

<script type="text/javascript">
    var runWysiwyg = false;
    $(document).ready(function()
    {
        if (runWysiwyg) {
            $('textarea.message-body').wysiwyg();
        }
        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
</script>

并将这个脚本放在你的页面中：

<script type="text/javascript">
    runWysiwyg = true;
</script>

【讨论】：

谢谢，我会得到相同的解决方案。我已经在我的页面中有一个 OnLoad() 函数，这个在主...
我又看了一些关于同步问题的通用解决方案，发现 JavaScript 不是多线程的：stackoverflow.com/questions/39879/…
你不会在“JavaScript 线程同步”上看到任何内容，因为浏览器中的 JS 引擎都是单线程的。

【解决方案2】：

这是我采用的解决方案。

在我的母版页中，我有这个...

<script type="text/javascript">
<!--
    $(document).ready(function()
    {
        if (typeof (OnLoad) != "undefined")
        {
            OnLoad();
        }

        $("input[type='text']:enabled:first", document.forms[0]).focus().select();
    });
//-->
</script>

在我的详细信息页面中，我有这个...

<script type="text/javascript">
<!--
    function OnLoad()
    {
        $('textarea.message-body').wysiwyg();
    }
//-->
</script>

【讨论】：

【解决方案3】：

$(window).load() 函数在$(document).ready() 之后触发

【讨论】：

【解决方案4】：

将custom event 触发器添加到您的母版页：

<script type="text/javascript">
$(document).ready(function()
{
    $('textarea.message-body').wysiwyg();
    $(document).trigger('tb');
});
</script>

并将其绑定到另一个页面：

<script type="text/javascript">
$(document).bind('tb', function(){
  $("input[type='text']:enabled:first", document.forms[0]).focus().select();          
});
</script>

参考文献

【讨论】：

这个乍一看可能看起来很吓人，但实际上非常简单，通常比听“加载”事件要好得多。如果您不知道何时触发“加载”以及需要等待多长时间，请阅读events/ready from JQuery docs。