on を使用して jQuery でイベントをバインドする場合、何に注意する必要がありますか?-jsチュートリアル-php.cn

on を使用して jQuery でイベントをバインドする場合、何に注意する必要がありますか?

小云云

リリース： 2018-01-22 11:21:08

オリジナル

1333 人が閲覧しました

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 = $(&#39;<p id="test">点我</p>&#39;);
 $(document.body).append(op);
 $("#test").on(&#39;click&#39;, function(){
 alert(&#39;这是事件前添加的DOM,可以正常触发点击事件&#39;);
 });
 } );
</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(&#39;click&#39;, function(){
 alert(&#39;这是事件后添加的DOM,无法正常触发点击事件&#39;);
 });
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $(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 = $(&#39;<p id="wrap"></p>&#39;);
 $(document.body).append(oWrap);
 $("#wrap").on(&#39;click&#39;, $(&#39;#test&#39;), function(){
 alert(&#39;委托对象在事件前添加,可以正常触发点击事件&#39;);
 });
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $("#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(&#39;click&#39;, $(&#39;#test&#39;), function(){
 alert(&#39;委托对象在事件后添加,无法正常触发点击事件&#39;);
 });
 var oWrap = $(&#39;<p id="wrap"></p>&#39;);
 $(document.body).append(oWrap);
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $("#wrap").append(op);
 } );
</script>
</head>
<body>
</body>
</html>

ログイン後にコピー

5. 説明: 仕事では、on イベントはイベントバインディングとイベントでよく使用されます。委任、少なくとも私はもっと遭遇しました。ライブイベントの使用。主な理由は、前の jQuery オブジェクトが $(document).on() などのドキュメントになっているためです。そのため、別の例は示しません。