如何使用 jquery 为 html 标记变量绑定事件？

Question

假设我有一个存储 html 标记的变量：

var $content=$("<div id='test'></div>")

然后我想给它一个点击事件，append 到 body 元素

$content.click(function(){
    console.log('click!');
});

$content.appendTo($('body'))

但是它不起作用，我怎样才能让它成为可能？

Answer 1

click处理程序设置得很好。 问题是，对于一个完全空的 div，它的高度为0 （除非你在没有显示的地方完成了样式设置），所以你找不到它来点击它。 零高度示例| 来源。

解决方案是将内容放在 div 中，或者为其设置样式以赋予其高度：

内容示例| 来源：

var $content=$("<div id='test'>I'm the div!</div>");
$content.click(function(){
    console.log('click!');
});
$content.appendTo($('body'));

样式示例| 来源：

JavaScript：

var $content=$("<div id='test'></div>");
$content.click(function(){
    console.log('click!');
});
$content.appendTo($('body'));

CSS：

#test {
    height: 20px;
    border: 1px solid black;
}

---

边注：

假设我有一个存储 html 标记的变量：

var $content=$("<div id='test'></div>");

请注意，您没有存储 HTML 标记。 通过使用 HTML 标记调用 jQuery，您告诉 jQuery 创建相关的 DOM 元素并将它们包装在 jQuery 实例中。

要将标记存储在变量中，您只需存储包含标记的字符串：

var content="<div id='test'></div>";

标记是文本； 元素是对象。

---

更新：在下面回复您的评论：

我在 jquery 插件 js 文件中写了这段代码......它有什么问题吗？

如果您的代码在body元素到 append 之前运行，这很重要； 如果没有body元素，您的最后一行将失败（例如，如果您的代码在加载时立即运行，并且它是从head元素加载的）。 如果body元素在您运行代码时存在，那应该没问题。