Question

我正在尝试将网页代码划分为仅在需要时加载代码。我的页面的head部分中包含一个javascript文件。该页面有一个按钮，单击该按钮时会将div带到前台，然后通过使用$ .getScript填充div。新加载的内容包含两个额外的div和十个按钮。但是，按钮不起作用。我是否在我的主html页面上，在我的主要javascript文件或新加载的文件中放置$（'＃element'）。click（）代码，它不起作用。我是否有错误格式化的东西，或者这只是一些永远不会起作用的东西？

$(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，那就太棒了。您不会提供有关何时调用这两个函数的顺序的信息。

但是，如果可以的话，我会在评论中写这篇文章，但由于我的声誉不足，我不能。所以我会在这里尝试解决你的解决方案。

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

Answer 2

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

$('#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模块加载器，可以完成你想要做的事情。这很直接。 Get started here.如果您需要推送，请给我发电子邮件。

Answer 4

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

然后在您返回的javascript结束时： addHandlers（）;

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

4 个答案: