[解決済み] jQuery .onとhoverの使い分けは可能ですか?
質問
私は
<ul>
には、最初のページロードの後に javascript が入力されます。 現在
.bind
と
mouseover
と
mouseout
.
プロジェクトはちょうどjQuery 1.7にアップデートされたところなので、私は
.on
で動作させることができないようです。
hover
. を使用することは可能ですか?
.on
と
hover
?
EDIT
: 私がバインドしている要素は、ドキュメントが読み込まれた後に、javascriptで読み込まれます。 そのため
on
でなく、単に
hover
.
解決方法は?
(
を使用する必要がある場合は、この回答の最後の編集をご覧ください。
.on()
をJavaScriptで実装した要素で使用します。
)
JavaScriptを使用していない要素に使用します。
$(".selector").on("mouseover", function () {
//stuff to do on mouseover
});
.hover()
は独自のハンドラを持ちます。
http://api.jquery.com/hover/
複数の処理を行いたい場合は、それらをチェーンして
.on()
ハンドラのようになります。
$(".selector").on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
以下の回答によると
hover
と
.on()
, でも。
新しいコードでは強く推奨されませんが、このように 擬似イベント名 "hover" は、次の文字列の省略形として使用されます。 "mouseenter mouseleave"。これは、これらの この2つのイベントは、ハンドラがevent.typeを検証して がmouseenterなのかmouseleaveなのか。を混同しないでください。 hover"擬似イベント名と.hover()メソッドは、1つだけ受け入れることができます。 または2つの関数があります。
また、これを使うことによるパフォーマンス上の利点はなく、単に
mouseenter
または
mouseleave
. 私が提供した答えは、より少ないコードで、このようなことを達成するための適切な方法です。
EDIT
この質問が回答されてからしばらく経ちますが、少しは浸透してきたようですね。 上記のコードはまだ有効ですが、私は最初の回答に何かを追加したいと思いました。
私は
mouseenter
と
mouseleave
(コードの中で何が起こっているのかを理解するのに役立つ)。
.on()
で以下のように書くのと同じです。
hover()
$(".selector").hover(function () {
//stuff to do on mouse enter
},
function () {
//stuff to do on mouse leave
});
元の質問では、どのようにすれば正しく使用できるかを尋ねているので
on()
と
hover()
の使い方を修正しようと思いました。
on()
を追加する必要があるとは思いませんでした。
hover()
というコードがありました。
2012年12月11日編集
以下の新しい回答は、その詳細です。
.on()
は
div
がJavaScriptで入力されている場合。 たとえば、あなたが
div
を使用して、jQueryの
.load()
イベントのようなものです。
(function ($) {
//append div to document body
$('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));
上記のコードで
.on()
は成り立たないでしょう。 代わりに、次のようにコードを少し修正する必要があります。
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector"); //pass the element as an argument to .on
このコードは、JavaScriptが組み込まれた要素が
.load()
イベントが発生しました。 引数を適切なセレクタに変更するだけです。
関連
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] GoogleのホストされたjQueryを使用する最良の方法、しかしGoogleの私のホストされたライブラリにフォールバックすることは失敗します。
-
[解決済み] jQuery/JavaScript:iframeのコンテンツにアクセスする
-
[解決済み] jQueryで画像をプリロードする
-
[解決済み] jQuery $(document).ready と UpdatePanels?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】iPad版SafariでjQueryを使ってタッチイベントを認識させる方法は?可能でしょうか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] セレクトした要素の外側のHTMLを取得する
-
[解決済み] JQueryでラジオボタンがチェックされているかどうかを調べる?
-
[解決済み] クリックボタンでクリップボードにコピー
-
[解決済み] jQueryを使用してCSSのdisplay noneまたはblockプロパティを変更するにはどうすればよいですか?
-
[解決済み] jQueryの複数要素の同一クリックイベント
-
[解決済み] jQueryは要素のレンダリングされた高さを取得しますか?
-
[解決済み] jQuery: テキストで要素を検索する
-
[解決済み】jQueryでマウスが要素上にあるかどうかを確認するにはどうすればよいですか?
-
[解決済み] jquery live hover
-
[解決済み] 1つのセレクタに複数のイベントハンドラを持つJQuery .on()メソッド