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

Question

htmlマークアップを格納する変数があるとします。

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

次に、クリックイベントを指定して、body要素に追加します

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

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

しかし、それは機能しません、どうすればそれを可能にすることができますか？

score 0 · Accepted Answer

ハンドラーは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 を呼び出すことにより、関連する DOM 要素を作成して jQuery インスタンスにラップするように jQuery に指示します。

マークアップを変数に保存するには、マークアップを含む文字列を保存します。

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

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

更新：以下のコメントを再確認してください：

このコードを jquery プラグインの js ファイルに書きますが、問題はありますか?

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

1 に答える 1