javascript - 将查询选择器保存在变量中以追加不起作用

Question

我想将一个 html 元素保存在一个变量中，然后将该元素附加到子元素中。我可以使用通常的 jquery 选择器附加该元素，但不能使用变量。为什么？

这是我的片段：

var elements, UserTableWidget = {

    elements: {
       pagination: $("#pageNumbers")
    },

    init: function() {
        elements = this.elements;

        elements.pagination.append("<li>test</li>") // works not
        $("#pageNumbers").append("<li>test</li>") // works
    },
}

Answer 1

为什么一切都这么复杂？我简化了一些。

$(function(){

  var UserTableWidget = {
    elements: {
      pagination: $("#pageNumbers")
    },

    init: function() {
      this.elements.pagination.append("<li>test</li>");
    },
  }

  UserTableWidget.init()
  // same as: UserTableWidget.elements.pagination.append("<li>test</li>");
});

正如评论中提到的，可能在 dom 准备好之前this.elements.pagination被初始化。("#pageNumbers")当您init()稍后调用时，它使用之前计算的值（空 jQuery 集合），因此不会附加任何内容。