[英]Using jQuery, how do I add elements to a jQuery object that's yet to be created?
Perhaps I am doing this wrong and suggestions on how to improve my code are appreciated. 也许我做错了,对如何改进我的代码的建议表示赞赏。 My situation is this: I have a toolbar with different elements that are populated by a callback. 我的情况是这样的:我有一个工具栏,其中包含由回调填充的不同元素。 I do not want to use the show() or hide() commands, I prefer to use detach, but I think there should be a nice way to deal with it. 我不想使用show()或hide()命令,我更喜欢使用detach,但我认为应该有一个很好的方法来处理它。 Here's my code: 这是我的代码:
entryView = function _entryView() {
var menuButton = $('<div/>').addClass('menuButton');
toolBar();
$.getJSON('ajax', function(o) {
var $enum2 = ss.IEnumerator.getEnumerator(dto.TransmittalDates);
while ($enum2.moveNext()) {
var dateTime = $enum2.get_current();
$('.menu').append($('<div/>').addClass('menuitem').text(dateTime.toString()));
}
});
}
toolBar = function _toolBar() {
var flyoutMenu = $('<div/>').addClass('menu');
$('.menuButton').click(function(o) {
$('.menubutton').append(flyoutMenu);
});
I did a quick cut and paste and renamed the variables to make them make sense. 我做了一个快速剪切和粘贴,并重命名变量,使它们有意义。 As you can see on the entry I build the toolbar and the very last thing I do is the ajax call. 正如您在条目中看到的那样,我构建了工具栏,我做的最后一件事是ajax调用。 The menu, however, is not created until the "click" event, so appending is not possible. 但是,在“点击”事件之前不会创建菜单,因此无法进行追加。
I realize that having global variables is bad, so I'm trying to avoid that, but I think the best situation would have the ajax call populate a Menu variable and when the DOM is created, to pull from that same Menu item. 我意识到有全局变量是坏的,所以我试图避免这种情况,但我认为最好的情况是让ajax调用填充一个Menu变量,当创建DOM时,从同一个Menu项中拉出来。 How do I pull this off? 我怎么把它关掉? Is there a better way to do it? 有没有更好的方法呢?
Edit: Fubbed a bit on the toolbar function, I think I have it should be correct now. 编辑:在工具栏功能上提了一下,我想我现在应该是正确的。
I'm confused by some parts of your code: 我对你代码的某些部分感到困惑:
entryView
function and when is it called? 什么是entryView
函数以及何时调用? toolBar
function exist as opposed to being inline? 为什么toolBar
函数存在而不是内联? From where else is it called? 它在哪里被称为? Why are you creating functions like that? 你为什么要创建这样的功能? Creating a variable without var
is bad practice, always makes global variables, and will be forbidden in ES5 strict mode. 创建一个没有var
的变量是不好的做法,总是生成全局变量,并且在ES5严格模式下将被禁止。 You should create functions like this: 你应该创建这样的函数:
var someFunction = function(arg1, arg2) { … };
or like this: 或者像这样:
function someFunction(arg1, arg2) { … }
_toolBar
)? 为什么要为每个函数指定第二个名称(例如_toolBar
)? The "private" name will only be in scope inside the function. “私有”名称仅在函数内的范围内。 The menu doesn't have to be in global scope, just in a scope that's common to both functions. 菜单不必位于全局范围内,只是在两个函数共有的范围内。
I would refactor it like this (knowing very little about the design of your application), inlining toolBar
: 我会像这样重构它(对应用程序的设计知之甚少),内联工具toolBar
:
function entryView() {
var menuButton = $('<div/>' {'class': 'menuButton'}), menu = $('<div/>', {'class': 'menu'});
$.getJSON('ajax', function(o) {
var $enum2 = ss.IEnumerator.getEnumerator(dto.TransmittalDates);
while ($enum2.moveNext()) {
var dateTime = $enum2.get_current();
$('.menu').append($('<div/>' {'class': 'menuItem'}).text(dateTime.toString()));
}
});
menuButton.click(function(o) {
menuButton.append(menu);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.