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

Question

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

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

然后我想给它一个click事件，并将它附加到body元素

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

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

然而它不起作用，我怎样才能使它成为可能？

Answer 1

click处理程序设置得很好。问题是，如果一个完全空的div，它的高度为0（除非你在某个你没有显示的地方做过样式），所以你找不到它来点击它。 Zero-height example | source

解决方案是将内容放入div中，或者给它设置样式以使其高度为：

Content example | source：

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

Styling example | source：

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元素之前运行，那么这很重要;没有body元素的最后一行将失败（例如，如果您的代码在加载时立即运行，并且它是从head元素加载的）。如果在运行代码时存在body元素，那么应该没问题。