jQueryライブイベントの使い方を詳しく解説
概要
jQuery は、要素が後で追加された場合でも、一致するすべての要素に event handler 関数を付加します。
このメソッドは基本的に .bind() メソッドの変形です。 .bind() を使用する場合、セレクターによって一致した要素にはイベント ハンドラーが付加されますが、後で追加された要素にはイベント ハンドラーが付加されません。これには、.bind() を再度使用する必要があります。たとえば、
<body> <div class="clickme">Click here</div> </body>
は、単純なクリック イベントをこの要素にバインドできます。
$('.clickme').bind('click', function() {
alert("Bound handler called.");
});要素がクリックされると、アラート ボックス がポップアップします。そして、この後にさらに別の要素が追加されたとします。
$('body').append('<div class="clickme">Another target</div>');
この新しい要素はセレクター「.clickme」にも一致しますが、この要素は .bind() を呼び出した後に追加されるため、この要素をクリックしても効果はありません。
.live() は、この状況に対処するメソッドを提供します。次のようにクリック イベントをバインドした場合:
$('.clickme').live('click', function() {
alert("Live handler called.");
});次に、新しい要素を追加します:
$('body').append('<div class="clickme">Another target</div>');
その後、新しい要素をクリックすると、イベント ハンドラーをトリガーできます。
Event Delegate
.live() メソッドは、イベント委任の使用により、DOM に追加されていない要素に対して有効である可能性があります。祖先要素にバインドされたイベント ハンドラーは、子孫でトリガーされたイベントに応答できます。 .live() に渡されるイベント ハンドラーは要素にバインドされませんが、特別なイベント ハンドラーとして扱われ、DOM ツリーのルート ノードにバインドされます。この例では、新しい要素がクリックされると、次のステップが発生します:
クリック イベントを生成し、それを処理のために
に渡します
イベントは DOM ツリーのルート ノードまでバブルアップし続けます。この特別なイベント ハンドラーはデフォルトでそれにバインドされます。 .live() によってバインドされた特別なクリック イベント処理関数を実行します。 このイベント処理関数は、まずイベント オブジェクトのターゲットを検出し、続行する必要があるかどうかを判断します。このテストは、$(event.target).closest('.clickme') が一致する要素を見つけることができるかどうかをチェックすることによって実装されます。 一致する要素が見つかった場合、元のイベント ハンドラーが呼び出されます。 上記の手順 5 のテストはイベントが発生したときにのみ実行されるため、いつでも追加された要素がこのイベントに応答できます。 追記 .live() は便利ですが、その特殊な実装のため、いかなる場合でも単純に .bind() を置き換えることはできません。主な違いは次のとおりです。 jQuery 1.4 では、.live() メソッドはカスタム イベントをサポートし、すべての JavaScript イベントもサポートします。 jQuery 1.4.1 では、フォーカス イベントとブルー イベント (より適切なバブリング focusin および focusout にマップされます) もサポートされています。さらに、jQuery 1.4.1 では、ホバー (「mouseenter Mouseleave」にマッピング) もサポートされます。ただし、jQuery 1.3.x では、サポートされている JavaScript イベント とカスタム イベント (click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover、mouseup) のみがサポートされています。 .live() は要素をサポートしません。 DOM トラバーサル経由で見つかったものは完全にサポートされています。代わりに、前の例で述べたように、常にセレクターの直後に .live() メソッドを使用する必要があります。 イベント処理関数が .live() にバインドされており、他のイベント処理関数の実行を停止したい場合、この関数は false を返す必要があります。 単に .stopPropagation() を呼び出すだけではこれは実現できません。 イベント バインディングの詳細については、.bind() メソッドを参照してください。 jQuery 1.4.1 では、.live() は複数のイベントを受け入れ、イベントをスペースで区切って、.bind() と同様の関数を提供できます。たとえば、次のように、マウスオーバー イベントとマウスアウト イベントの両方を「ライブ」バインドできます: jQuery 1.4.3 の場合: 1 つ以上のイベント タイプを string と関数データマップにバインドして実行できます。jQuery では 1.4 では、data パラメーターを使用して追加情報をイベント ハンドラーに渡すことができます。クロージャによって発生する問題に対処するのに適しています。詳細については、.bind() の説明を参照してください。 jQuery 1.4 では、ライブ イベントをデフォルトのドキュメント ルートの代わりに「コンテキスト」DOM 要素にバインドできます。このコンテキストを設定するには、(jQuery コレクションやセレクターではなく) 単一の DOM 要素で jQuery() 関数の 2 番目の引数を使用します。 参数 type,[fn]String,FunctionV1.3 type:一个或多个事件类型，由空格分隔多个事件。 fn:要从每个匹配元素的事件中反绑定的事件处理函数 type,[data],falseString,Array,boolV1.4 type:一个或多个事件类型，由空格分隔多个事件。 data:传递给事件处理函数的附加参数 false:设置为false会使默认的动作失效。 eventStringV1.4.3 一个或多个事件类型的字符串和函数的数据映射来执行他们 示例 描述: 点击生成的p依然据有同样的功能。 HTML 代码: jQuery 代码: 描述: 阻止默认事件行为和事件冒泡，返回 false jQuery 代码: 描述: 仅仅阻止默认事件行为 jQuery 代码: 这是代码，用live绑定的事件不执行，但是创建的元素能添加进去。这是为什么 你的_html是字符串啊，你是不是要点击li触发事件？ 以上がjQueryライブイベントの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});$("a").live({
click: function() {
// do something on click
},
mouseover: function() {
// do something on mouseover
}
});$('div.clickme', $('#container')[0]).live('click', function() {
// Live handler called.
});<p>Click me!</p>
$("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); });$("a").live("click", function() { return false; });$("a").live("click", function(event){ event.preventDefault(); });
那应该是$('li').live('click',function(){....})
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7480
15
1377
52
77
11
19
33
CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハード ドライブ用の小型 HDD ベンチマーク ツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハード ドライブとソリッド ステート ドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスク パフォーマンス テスト ツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハード ドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテスト モードを提供し、ハードウェアのレビューで広く使用されています。
foobar2000のダウンロード方法は？ -foobar2000の使い方
Mar 18, 2024 am 10:58 AM
foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください
NetEase メールボックス マスターの使用方法
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メール アドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メール ソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイル アプリ ストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「NetEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メール アカウントを開いてログインします。ログイン インターフェイスは次のとおりです。
Baidu Netdisk アプリの使用方法
Mar 27, 2024 pm 06:46 PM
クラウド ストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウド ストレージ サービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストール まず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタム インストール オプションを選択してください。
Win11での管理者権限の取得について詳しく解説
Mar 08, 2024 pm 03:06 PM
Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています
BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は?
Apr 26, 2024 am 09:40 AM
MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。
Oracle SQLの除算演算の詳細説明
Mar 10, 2024 am 09:51 AM
OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算
iOS 17.4の新しい高度な機能「盗難デバイス保護」の使い方を教えます
Mar 10, 2024 pm 04:34 PM
Appleは火曜日にiOS 17.4アップデートを公開し、iPhoneに多数の新機能と修正をもたらした。このアップデートには新しい絵文字が含まれており、EU ユーザーは他のアプリ ストアから絵文字をダウンロードすることもできます。さらに、このアップデートでは iPhone のセキュリティ制御も強化され、より多くの「盗難デバイス保護」設定オプションが導入され、ユーザーにより多くの選択肢と保護が提供されます。 「iOS17.3では、「盗難デバイス保護」機能が初めて導入され、ユーザーの機密情報のセキュリティが強化されています。ユーザーが自宅やその他の身近な場所から離れている場合、この機能ではユーザーは最初に生体認証情報を入力する必要がありますApple ID パスワードの変更や盗難デバイス保護の無効化など、特定のデータにアクセスして変更するには、情報を再度入力する必要があります。
