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

Question

我正在尝试为网页划分代码，以便仅在需要时加载代码。我有一个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;
        }
}

Answer 1

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

然而，如果可以的话，我会在评论中写这篇文章，但由于我的声誉不够，我就是做不到。因此，我将在这里尝试一种解决方案。

我不会使用on。我会使用live方法。有关其他信息、参数列表和示例，请查看文档。不过，这也有一些负面影响。有些人不喜欢这种方法，因为live方法确实消耗了相当多的性能。他们更喜欢委托，因为它限制了必须检查事件的元素。考虑一篇这样的文章。虽然我不记得我读过哪篇文章，但我想信息很相似。

Answer 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

Answer 3

事件没有连接，因为这些元素还不在DOM中。。这就是为什么你的按钮不起作用。我忍不住想，你真正想要的是一种按需加载脚本的方法。我个人可以推荐require.js。这是一个JavaScript模块加载程序，可以完全按照你的意愿进行加载。它非常简单。从这里开始。如果你需要推送，请给我发电子邮件。

Answer 4

如果将事件处理程序放在一个由返回的javascript调用的函数中，那么应该没问题。function（）addHandlers｛$（'#slideButton1'）.click（function（）｛｝

然后在返回的javascript末尾：addHandlers（）；