ホームページ > 記事 > ウェブフロントエンド > jQuery はページ データとイベント委任を動的に追加します
jQuery はページ データとイベント委任を動的に追加します
- 小云云オリジナル
- 2018-01-12 10:53:391327ブラウズ
この記事では主に jQuery の動的追加ページデータとイベント委任に関する情報を詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。
私たちが実行したいタスクは、ページの先頭にいくつかの写真があることです。クリックすると、写真の一部が現在のページにロードされます。もう一度クリックし、リストしたページが「読み込みが完了し、リンクが消える」まで読み込みを続けます。
最初のレンダリングは次のとおりです:
これはページの下部のみをキャプチャします。マウスを画像上に置くとテキストが表示され、マウスを離すとテキストが消えます。
ここでしなければならないことは、下の [MorePhotos] リンクをクリックしたときにデータの別の部分をロードし、データがロードされるまでクリックしてデータの別の部分をロードすることです。
まず、本文のコードは次のとおりです:
<p id = "container">
<h1> Photo Gallery</h1>
<p id = "gallery">
<p class = "photo">
<img src = "./images/1.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye ....</p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/2.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye.... </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/3.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye.... </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
//若干图片
</p>
<p class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></p>
</p>次に、ロード用に同じルート ディレクトリにいくつかの HTML コード スニペットを記述します。
たとえば、次のような 1.html コードがあります
<p class = "photo">
<img src = "./images/1.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/2.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/3.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/4.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/5.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/6.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>この HTML フラグメントでは、6 つの画像を導入しました。 2.html などの他のフラグメントは、上記のものを真似て書くことができます。多数の HTML フラグメントを定義した後、jQuery を使用してデータを動的に追加します。
まず jquery ライブラリを紹介します http://libs.baidu.com/jquery/1.9.0/jquery.js
<script>
$(document).ready(function(){
//首先定义一个变量来记录当前是多少页
var pageNum = 1;
//给链接添加点击事件
$("#more-photos").click(function(event){
event.preventDefault();
var $link = $(this);
//获得当前所点链接的url
var url = $link.attr('href');
//如果该链接的url存在，进行页面追加
if(url){
$.get(url, function(data){
$("#gallery").append(data);
});
pageNum ++;
//总共有十个片段要追加，名称分别为1.html,2.html ...10.html
当当前页面的总数小于总数时，进行链接更新。
if(pageNum < 10){
$link.attr('href', './'+pageNum+'.html');
}
//当将所有片段追加完成后，移除链接。
else{
$link.remove();
}
}
})
});上記のコードは、ページにデータを動的に追加できます。
ただし、Google Chrome では次のエラーが表示されます:
jquery.js:8475 XMLHttpRequest は file:///C:/Users/%E9%95%BF%E5%AD%99%E4 %B8% を読み込めませんB9%E5%87%A4/Desktop/webtest/1.html。クロスオリジンリクエストはプロトコルスキームでのみサポートされています: http、data、chrome、chrome-extension、https.
IE10 環境で実行 テスト済み、問題ありません。
解決策は、Web サーバーをインストールし、ファイルをプロジェクトにコピーし、Web サーバー内のパスを使用してアクセスすることです。問題はありません。 http://localhost:8080/ajax/ajaxLoad.html
マウスホバーイベントにより、マウスを画像の上に置くとテキストが表示され、マウスを移動するとテキストが表示されます。画像が表示されなくなります。
$(document).ready(function(){
$('p .photo').hover(function(){
$(this).find('.details').fadeTo('slow', 0.7);
},function(){
$(this).find('.details').fadeOut('slow');
})
});または、上記のコードを組み合わせて冗長なコードを減らすことができます:
$(document).ready(function(){
$('p.photo').on('mouseenter mouseleave',
function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
//0.7代表的是透明度
}
else{
$details.fadeOut('slow');
}
})
}); 上記の 2 つのコードを使用して各画像にマウス ホバー イベントを追加すると、最初のページの画像のみ イベントのみイベントはバインドされますが、動的にロードされた画像にバインドすることはできません。イベント ハンドラーは、メソッドが呼び出されたときにすでに存在する要素にのみ追加されるため、この方法で動的に追加された要素には、それらのイベントがバインドされません。
したがって、解決策は 2 つあります:
1. 動的読み込み後にイベント ハンドラーを再バインドします。
2. イベントを最初から既存の要素にバインドし、イベント バブリングに依存します。
次のステップは、jquery のデリゲート メソッドを使用することです;
$(document).ready(function(){
$('#gallery').on('mouseenter mouseleave', 'p.photo', function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
}
else{
$details.fadeOut('slow');
}
})
})$('#gallery').on('mouseenter Mouseleave', 'p.photo', function(event), in 'p.photo' ' 2 番目のパラメーターとして、.on() メソッドはこれをセレクターに一致するギャラリー内の要素にマップします。つまり、これはギャラリー内の p class= 'photo' を持つ要素を指します。最後に追加したページでは、すべてギャラリーの下の要素に属しているため、対応するイベントが各画像に追加されます
追加したいページがどの親要素に属しているかわからない場合は、$ を入力できます。 '#gallery' in ('#gallery').on() with document. この方法では、ドキュメントがページ内のすべての要素の祖先であるため、間違ったコンテナを選択することを心配する必要はありません。 document を使用するデメリット:
DOM のネスト構造が非常に深い場合、イベントが多数の祖先要素を介してバブルアップすると、パフォーマンスが大幅に低下します
一般的に、イベント ハンドラーがロードされるまで DOM 要素にバインドされないのは、このためです。ただし、 document 要素は、ページが読み込まれるとほとんど消えます。このハンドラーは、完全な DOM が構築されるのを待たずに、すぐに呼び出すことができます。たとえば、上記のコードは次のように記述できます。ドキュメント全体の準備が整うまで待機しないため、すべての ffc9c8114f841227815a848e4d92fbf8 要素がページ上に表示されている限り、mouseenter 動作と Mouseleave 動作を適用できます。上記は、jQuery を使用してページ データとイベント委任を動的に追加するためのすべての知識です。ソース コードは以下に添付されています。
PHP デザイン パターンの委任パターンの詳細な説明。
JavaScriptでのイベント委任に関するネイティブJSとjQueryのサンプルコード共有
以上がjQuery はページ データとイベント委任を動的に追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。