jQuery - 如果异步重印html，如何将页面元素保存为变量

Question

我有一个单页应用程序，用 javascript 和 jQuery 编码。页面内容正在根据用户的交互进行重新打印。问题是，我将页面元素声明为全局变量，但它们不起作用（它们的值未定义），因为 html 被清空并再次填充。

如果不是全局的，我应该在哪里声明页面元素？

这是我的代码的当前模式：

$(document).ready(function () {
    //GLOBAL VARIABLES
    var $homeLink = $(".home");
    var $userLink = $(".user");  
    var $content = $(".content");
    var $text = $(".content .text"); //this is undefined as the html doesn't exist yet

    //FUNCTIONS
    function printHtml() {  
        $content.empty();
        $('<div />', { class: "text", text: "Lorem" }).appendTo($content);
    }

    //EVENTS
    $homeLink.on("click", function(){
        printHtml();
    });

    $text.on("click", function() { //can't get here because variable $text is undefined
        //do something
    });
});

Answer 1

委托呢？

只需更换你的

$text.on("click", function() { //can't get here because variable $text is undefined
        //do something
    });

与

$content.on('click', '.text', function() {

});

在$text 中不需要（或者如果你需要，你总是可以在处理程序中使用 jQuery 来获取它（因此它可以更改，你应该在每次点击时重新找到它）