如何在 $.getScript 加载的文件内设置 $(document).ready 函数
我试图将网页的代码划分为仅在需要时加载代码。我的页面的头部包含一个 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;
}
}
I'm trying to compartmentalize the code for a webpage to load code only when needed. I have one javascript file included in the head section of my page. The page has a button, which when clicked, brings a div to the foreground, then populates the div through the use of $.getScript. The newly loaded content consists of two additional divs and ten buttons. However, the buttons don't work. Whether I put the $('#element').click() code on my main html page, in my primary javascript file or the newly loaded file, it doesn't work. Do I have something incorrectly formatted or is this just something that will never work?
$(document).ready(function() {
alert("Test"); /* This works */
$('#slideButton1').click(function() {
alert("Testing"); /* This doesn't */
});
});
Buttons are generated by the following code:
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;
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
首先，如果您能提供一个jsFiddle，那就太好了。您没有提供有关调用这两个函数的顺序的信息。
然而，如果可以的话，我会在评论中写下这个，但由于我的声誉不够，我就是不能。因此，我将在这里尝试一种解决方案。
Unline czarchaic，我不会使用
on。我会使用live方法。有关其他信息、参数列表和示例，请查看文档。但这也有一些缺点。有些人不喜欢这种方法，因为live方法确实会消耗相当多的性能。他们更喜欢委托，因为它限制了必须检查事件的元素。考虑像这样的文章。我不记得我读过哪篇文章，但我认为信息非常相似。First of all, it would be great if you could provide a jsFiddle. You do not give information on the order of when those two functions are called.
However, I would have written this in a comment if I could, but due to my insufficient reputation, I just can't. So I'll attempt an approach to your solution here.
Unline czarchaic, I wouldn't use
on. I'd use thelivemethod. Check the documentation for additional information, parameter lists, and an example. There are some downsides to this though. Some people dislike this methodology because thelivemethod does eat quite some performance. They prefer delegate because it limits the elements that have to be checked for events. Consider an article like this. I do not remember which article I've read though, but I assume the information is quite similar.您的问题是，当您绑定到
$('#slideButton1')时，它在 DOM 中不存在。解决方案是使用on方法绑定到$('#gallerySlider')元素。为您的 div 指定类名并以这种方式定位它们可能是个好主意。
Your problem is that when you bind to
$('#slideButton1')it doesn't exist in the DOM. The solution is to bind to the$('#gallerySlider')element using theonmethod.It might be a good idea to give class names to your divs and target them that way.
事件没有被连接，因为这些元素还不在 DOM 中。这就是你的按钮不起作用的原因。我忍不住认为您真正寻找的是一种按需加载脚本的方法。我个人推荐 require.js。它是一个 JavaScript 模块加载器，可以完全完成您想要做的事情。这非常简单。 从这里开始。如果您需要推送，请给我发电子邮件。
The events aren't being wired because those elements aren't in the DOM yet.. That's why your buttons don't work. I can't help but think what you're really looking for is a way to load scripts on demand. I can personally recommend require.js. It's a JavaScript module loader that will do exactly what you're trying to do. It's pretty straight forward. Get started here. Email me if you need a push.
如果你把你的事件处理程序放在一个由返回的 javascript 调用的函数中，你应该没问题。
function() addHandlers{$('#slideButton1').click(function() { }
然后在返回的 javascript 末尾：
添加处理程序（）；
If you put your event handlers in a function that gets called by the returned javascript you should be fine.
function() addHandlers{$('#slideButton1').click(function() { }
Then in at the end of your returned javascript:
addHandlers();