Javascript 将查询选择器保存在要追加的变量中无效

我想在变量中保存一个html元素，然后用childelements追加该元素。我可以使用常用的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
    },
}

var元素，UserTableWidget={
要素：{
页码：$（“#页码”）
},
init:function（）{
元素=这个元素；
elements.pagination.append（“
test
”/）不起作用
$（“#页码”）。追加（
测试
”//works
},
}

为什么事情这么复杂？我简化了一些

$(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>");
});

$（函数（）{
var UserTableWidget={
要素：{
页码：$（“#页码”）
},
init:function（）{
this.elements.pagination.append（“
test
”）；
},
}
UserTableWidget.init（）
//与：UserTableWidget.elements.pagination.append（“
测试”
”）相同；
});

---

如注释中所述，

this.elements.pagination

可能在dom准备就绪之前初始化为

（“#页码”）

。稍后调用

init（）

时，它使用之前计算的值（空jQuery集合），因此没有附加任何内容。

这看起来像是一个dom就绪状态问题，`pagination:$（“#pageNumbers”）`在dom就绪之前执行，但

init

方法在dom就绪之后调用。init函数作为我身体中的最后一个元素被调用（脚本标记）。它应该已经存在了，对吗？userTableWidget.init（）可以工作