jqueryを使用してhtmlマークアップ変数のイベントをバインドするにはどうすればよいですか？

Question

私は店のHTMLマークアップ変数があるとします。そして、私はどのように、することができ、それをクリックしてイベントを与え、それが動作しません。しかし、body要素に

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

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

それを追加したい

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

を私はそれを可能にする？

Answer 1

clickハンドラがうまくセットアップされます。問題は、完全に空のdivの場合は、0の高さです（表示されていない場所でスタイリングを行っていない限り）ので、クリックすると見つかりません。 | source。 |

Content example：

ソリューションは、divの中にコンテンツを置くために、またはそれに高さを与えるためにそれをスタイリングを与えることです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マークアップを保存する変数があるとしあなたがHTMLマークアップを格納していない

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

注意。 HTMLマークアップを使用してjQueryを呼び出すと、関連するDOM要素を作成してjQueryインスタンスにラップするようにjQueryに指示します。変数にマークアップを保存するために

、あなただけのマークアップを含む文字列を格納したい：

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

マークアップはテキストです。要素はオブジェクトです。

---

更新：以下のコメント日時：

私はjQueryプラグインのjsファイルでこのコードを書く...それはいくつかの問題がありますか？

追加する要素がbodyになる前にコードが実行されていれば問題ありません。最後の行はbody要素なしで失敗します（たとえば、コードがロード時にすぐに実行され、head要素からロードされている場合）。コードを実行する時点でbody要素が存在する場合は、問題なく動作します。