0

我正在尝试划分网页的代码以仅在需要时加载代码。我的页面头部包含一个 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;
        }
}
4

4 回答 4

2

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

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

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

于 2012-01-29T03:28:23.687 回答
1

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

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

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

$('#gallerySlider').on( 'click', '.myClassName', function( e ){ // etc
于 2012-01-29T03:21:00.007 回答
0

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

于 2012-01-29T03:21:09.273 回答
0

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

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

于 2012-01-29T04:07:35.387 回答