javascript - 使用 jQuery，如何向尚未创建的 jQuery 对象添加元素？

Question

也许我做错了，感谢有关如何改进我的代码的建议。我的情况是这样的:我有一个工具栏，其中包含由回调填充的不同元素。我不想使用 show() 或 hide() 命令，我更喜欢使用分离，但我认为应该有一个很好的方法来处理它。这是我的代码:

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);
    });

我进行了快速剪切和粘贴，并重命名了变量以使它们有意义。正如您在我构建工具栏的条目中看到的，我做的最后一件事是 ajax 调用。但是，菜单直到“点击”事件才会创建，因此无法添加。

我意识到拥有全局变量是不好的，所以我试图避免这种情况，但我认为最好的情况是让 ajax 调用填充菜单变量，并在创建 DOM 时从同一个菜单项中提取.我该如何解决这个问题？有更好的方法吗？

编辑:工具栏功能有点乱，我想我现在应该是正确的。

Answer 1

我对你代码的某些部分感到困惑:

• entryView 函数是什么，何时调用？
• 为什么 toolBar 函数存在而不是内联？从其他地方叫它？

• 为什么要创建这样的函数？在没有 var 的情况下创建变量是不好的做法，它总是生成全局变量，并且在 ES5 严格模式下将被禁止。你应该像这样创建函数:

  var someFunction = function(arg1, arg2) { … };
  

  或者像这样:

  function someFunction(arg1, arg2) { … }
  

• 为什么要给每个函数起第二个名字(例如 _toolBar)？ “私有(private)”名称将仅在函数内的范围内。

菜单不必在全局范围内，只需在两个函数共有的范围内即可。

我会像这样重构它(对您的应用程序的设计知之甚少)，内联 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);
    });
}