如何在 $.getScript 加载的文件中设置 $(document).ready 函数答案

【问题标题】：How to set up a $(document).ready function inside a file loaded by $.getScript如何在 $.getScript 加载的文件中设置 $(document).ready 函数
【发布时间】：2012-01-29 03:13:26
【问题描述】：

我正在尝试划分网页代码，以便仅在需要时加载代码。我的页面头部包含一个 javascript 文件。该页面有一个按钮，当单击该按钮时，会将一个 div 带到前台，然后通过使用 $.getScript 填充该 div。新加载的内容由两个额外的 div 和十个按钮组成。但是，按钮不起作用。无论我将 $('#element').click() 代码放在我的主 html 页面、我的主 javascript 文件还是新加载的文件中，它都不起作用。我的某些内容是否格式不正确，或者这只是无法正常工作的内容？

$(document).ready(function() {
        alert("Test");  /*     This works     */
        $('#slideButton1').click(function() {
                alert("Testing");     /*   This doesn't     */
        });
});

按钮由以下代码生成：

function addGalleryButtons() {
        var sLabels = new Array("Aircraft","Avatars","BattleArmor","BattleMechs","Book Covers","Characters","Lego BattleTech","Maps","Naval Vessels","Vehicles");
        var leftIndent = 15;
        for(var i=0; i<sLabels.length; i++) {
                var slBtn = $(document.createElement('div')).attr('id','slideButton'+i);
                slBtn.addClass('base shadowed rad3 gSlideButton');
                slBtn.html(sLabels[i]);
                var slb = { 'left' : leftIndent+'px' , 'opacity' : '0.7' };
                slBtn.css(slb);
                slBtn.attr('title','slideButton'+i);
                slBtn.appendTo('#gallerySlider');
                leftIndent = leftIndent + $('#slideButton'+i).width() + 12;
        }
}

【问题讨论】：

标签： javascript jquery document-ready getscript

【解决方案1】：

首先，如果您能提供jsFiddle，那就太好了。您没有提供关于这两个函数何时被调用的顺序的信息。

但是，如果可以的话，我会在评论中写下这个，但由于我的声誉不足，我不能。因此，我将在此处尝试解决您的解决方案。

取消czarchaic，我不会使用on。我会使用live 方法。查看documentation 以获取更多信息、参数列表和示例。不过，这也有一些缺点。有些人不喜欢这种方法，因为live 方法确实消耗了相当多的性能。他们更喜欢委托，因为它限制了必须检查事件的元素。考虑像@987654323@ 这样的文章。我不记得我读过哪篇文章，但我认为信息非常相似。

【讨论】：

@czarchaic 的方法更胜一筹。 live 已被弃用，这是有充分理由的。您可以使用$(document).on(etc) 重现相同的效果（这正是live）；然而，这意味着文档中的每个元素都是一个监听器。为什么不只让最近的 non-destroyed 祖先成为监听器呢？它表现得更好，而且对于那些重要的人（不是每个人，我承认！）它也更优雅。
@GregPettit 好吧，我已经有一段时间没有使用 jQuery 了。我当前项目的当前阶段不需要 JavaScript。我还没有使用on 方法。我确实承认I'd use the live method。如果可以的话，我会发布我的答案的四分之一作为评论，但是......我低于 50 代表。这确实让我对 StackOverflow 感到恼火......无论如何，感谢您的评论。当我最终进入需要 JS 的阶段时，我会检查一下。 :D

【解决方案2】：

您的问题是当您绑定到 $('#slideButton1') 时，它在 DOM 中不存在。解决方案是使用on 方法绑定到$('#gallerySlider') 元素。

$('#gallerySlider').on( 'click', 'div', function( e ){
  console.log( $( this ), $( this ).attr( 'id' ) );
});

为您的 div 指定类名并以这种方式定位它们可能是个好主意。

$('#gallerySlider').on( 'click', '.myClassName', function( e ){ // etc

【讨论】：

这很好用。我快速浏览了一下 jsFiddle，如果我使用多个 javascript 文件，如何设置它并不是很直观。对 .on() 功能进行了一些调查并进行了一些反复试验，以下内容非常适合鼠标悬停/鼠标悬停。它处理十个按钮中的每一个。 $('#galleryWindow').on('mouseover', '#gallerySlider div', function() { $(this).stop().animate({ opacity: 1.0 }, 200); }); $('#galleryWindow').on('mouseout', '#gallerySlider div', function() { $(this).stop().animate({ opacity: 0.5 }, 200); });

【解决方案3】：

事件没有被连接，因为这些元素还没有在 DOM 中。这就是你的按钮不起作用的原因。我不禁想到您真正想要的是一种按需加载脚本的方法。我个人可以推荐require.js。它是一个 JavaScript 模块加载器，可以完全按照您的要求进行操作。这很简单。 Get started here.如果您需要推送，请给我发电子邮件。

【讨论】：

【解决方案4】：

如果您将事件处理程序放在由返回的 javascript 调用的函数中，您应该没问题。 function() addHandlers{$('#slideButton1').click(function() { }

然后在您返回的 javascript 的末尾： addHandlers();

【讨论】：