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获取它（因此可以更改它，您应该在每次单击时重新找到它）