1

クリックしたときに div クラス {list} の内部の子を表示したいのですが、ユーザーがもう一度クリックすると非表示になります。しかし、問題は、ユーザーが入力フィールドをクリックすると、それが非表示になることです。

<div class="list">
 <label>Enter your name</label>
 <input type="text" class="data"/>
</div>

<div class="list">
 <label>Enter your Number</label>
 <input type="text" class="data"/>
</div>

jsコード

  $(document).ready(function()
  {
    $(".list").click(function(event){                
    $(this).children().slideToggle(1000);            
             });
 });
4

4 に答える 4

2

クリック イベントを入力フィールドにバインドし、event.stopPropagation() を呼び出します。

説明: イベントが DOM ツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。

$(".list input").click(function(e){
    e.stopPropagation();
});

また：

$(".list").click(function(){
            $(this).children().toggle();
        });
        $(".list").children().click(function(e){
            e.stopPropagation();
        });
于 2012-09-11T08:40:37.167 に答える
0

これは、入力要素をクリックするとイベントが発生するためです。以下のコード行を使用して、イベントのイベント伝播を停止する必要があります。

 evt.stopPropagation();
于 2012-09-11T08:42:06.900 に答える
0

クリックが実際に子ノードからバブリングされているかどうかを常に確認し、そうである場合はドロップすることができます。

$(".list").click(function(event){                
    if($(event.target).parents('.list').length > 0) { return; }
    $(this).children().slideToggle(1000);            
});

別の方法としてevent.preventDefault()、子ノードから呼び出してバブリングを手動でキャンセルすることもできますが、子ノードの他の部分をクリック可能にしたい場合は、特別な注意が必要になる場合があります。

于 2012-09-11T08:38:38.527 に答える
0

これは使用関数 jQuery.delegate http://api.jquery.com/delegate/の完璧な例です

親要素('.list')を指定可能

次に、「クリック」機能を使用する親要素 (「ラベル」) で子オブジェクトを指定します。注意してください、関数は「子要素」に呼び出されるため、 .parent() 要素を切り替える必要があります

$(".list").delegate('label','click',function(event){                
    $(this).parent().slideToggle(1000);            
});
于 2012-09-11T09:08:02.150 に答える