如何使用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。

解决的办法是把内容股利，或给它的造型给它高度：

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元素追加到之前正在运行;如果代码在加载时立即运行，并且从head元素加载，则最后一行将失败，但不包含body元素。如果在运行代码时存在body元素，则应该没问题。