0

私はjQueryの絶対的な初心者であり、フロントエンド開発ではかなりがらくたなので、ここに私の質問があります。

次のHTMLで

<select id="event_category_id" name="event_category_id">
  <option value="">Select Category</option>
  <option value="1">Category One</option>
  <option value="2">Category Two</option>
  <option value="3">Category Three</option>
</select>

そして次のjQuery

$(document).ready(function() {
  // commands go here
  $('#event_category_id option').click( function(e) { 
    // e.stopImmediatePropagation();
    alert( $('#event_category_id option:selected').text() ); 
   });
});

アラートが2回表示され、1回のクリックで毎回正しい選択テキストが表示されます。stopImmediatePropagationのコメントを解除することで修正されます。

だから私の質問は、これがイベントのバブリング/キャプチャである場合、選択にはテキストがなく、オプションのみであるため、アラートの1つが空白になることはありません。

それとも、私はこのすべての作品がうまくいくと思う方法で間違った方向に進んでいますか？

御時間ありがとうございます。

4

3 に答える 3

1

clickイベントを使用しないでください。change代わりにイベントを使用してください。

$(document).ready(function() {  
   $('#event_category_id').change( function(e) { 
     alert( $(this).children('option:selected').text() ); 
   });
});

参考：変更

于 2010-07-01T08:46:53.433 に答える
0

イベントのバブリングを幅広いトピックとして説明しようとすること。

イベント オブジェクトは .stopPropagation() メソッドを提供します。これにより、イベントのバブリング プロセスを完全に停止できます。このメソッドは単純な JavaScript 機能ですが、すべてのブラウザーで安全に使用できるわけではありません。ただし、すべてのイベント ハンドラーが jQuery を使用して正しく登録されている場合は、その方法を使用できます。

stopPropagation は、現在を超えるオブジェクトがイベントを受信するのを防ぎます。これは、イベントの任意のフェーズ内にある可能性があります。stopImmediatePropagation は同じことを行いますが、イベントを受信して​​いる現在のターゲット内で追加のイベントが発生しないようにする追加の手順も実行します。

デフォルト アクション

クリック時にリダイレクトするデフォルトのアクションを持つようなデフォルトのアクションを持つ要素を使用する場合。同様に、ユーザーがフォームを編集しているときに Enter キーが押されると、フォームで送信イベントがトリガーされますが、実際のフォーム送信はその後に発生します。

これらのデフォルト アクションが望ましくない場合、イベントで .stopPropagation() を呼び出しても役に立ちません。これらのアクションは、イベント伝播の通常の流れではどこにも発生しません。代わりに、.preventDefault() メソッドは、デフォルト アクションがトリガーされる前に、トラック内のイベントを停止する役割を果たします。

バブリングとデフォルト アクションの両方を停止するには、つまり .stopPropogation() および .preventDefault() メソッドを呼び出すには、次のようにしますreturn false。

于 2010-07-01T08:58:09.093 に答える
0

試す...

$('#event_category_id').change( function(e) {    
   alert( $(this).find(':selected').text() ); 
});

デモで遊ぶ

于 2010-07-01T08:45:59.057 に答える