如何使用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元素，則應該沒問題。