ホームページ > 記事 > ウェブフロントエンド > on を使用して jQuery でイベントをバインドする場合、何に注意する必要がありますか?
on を使用して jQuery でイベントをバインドする場合、何に注意する必要がありますか?
- 小云云オリジナル
- 2018-01-22 11:21:081243ブラウズ
jQuery のバージョンの更新により、以前のバージョンの Bind()、live()、delegate() イベントは直接 on に置き換えられるようになりました。このノートでは、クリック イベントのみを例として取り上げ、主に使用方法を検討します。 on イベントの概要: この記事では主に紹介しています。 この記事では、jQuery でイベントをバインドするために on を使用する際に注意する必要があることについて説明します。非常に参考値が高いです。以下のエディターで見てみましょう。皆さんのお役に立てれば幸いです。
1. on を使用して、クリック イベントが正常にトリガーされる前に追加された DOM を監視する:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
var op = $('<p id="test">点我</p>');
$(document.body).append(op);
$("#test").on('click', function(){
alert('这是事件前添加的DOM,可以正常触发点击事件');
});
} );
</script>
</head>
<body>
<p id="wrap"></p>
</body>
</html>2. on を使用して、クリック イベントが正常にトリガーされない後に追加された DOM を監視する:
<!-- 一、正常的DOM: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
$("#test").on('click', function(){
alert('这是事件后添加的DOM,无法正常触发点击事件');
});
var op = $('<p id="test">点我</p>');
$(document.body).append(op);
} );
</script>
</head>
<body>
<p id="wrap"></p>
</body>
</html>3. 解決策: イベント委任を使用します。委任されたオブジェクトは DOM にすでに存在しているか、イベントの前に動的に追加されている必要があることに注意してください。それ以外の場合は、次のようにイベントをトリガーできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
var oWrap = $('<p id="wrap"></p>');
$(document.body).append(oWrap);
$("#wrap").on('click', $('#test'), function(){
alert('委托对象在事件前添加,可以正常触发点击事件');
});
var op = $('<p id="test">点我</p>');
$("#wrap").append(op);
} );
</script>
</head>
<body>
</body>
</html>
4. 委任 オブジェクトはイベントの後に追加され、クリック イベントはトリガーできません
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
height: 100px;
font-size: 50px;
color: yellow;
line-height: 100px;
background-color: red;
text-align: center;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$( function(){
$("#wrap").on('click', $('#test'), function(){
alert('委托对象在事件后添加,无法正常触发点击事件');
});
var oWrap = $('<p id="wrap"></p>');
$(document.body).append(oWrap);
var op = $('<p id="test">点我</p>');
$("#wrap").append(op);
} );
</script>
</head>
<body>
</body>
</html>
5. 説明: 仕事では、on イベントはイベント バインディングとイベントでよく使用されます。委任、少なくとも私はもっと遭遇しました。ライブ イベントの使用。主な理由は、前の jQuery オブジェクトが $(document).on() などのドキュメントになっているためです。そのため、別の例は示しません。
関連する推奨事項:
jqueryのappend要素の無効なIDバインディングイベントの解決策
ループ内のJQueryバインディングイベントの問題の詳細な説明
イベント関数の使用法の詳細な説明JavaScript のイベント属性を使用したバインディング
以上がon を使用して jQuery でイベントをバインドする場合、何に注意する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。