1

さまざまな jQuery ui ダイアログ ボックスを開くボタンがいくつかある Web サイトがあります。

これらのダイアログの 1 つ (ID は ) の内部にfilter_storyは、ユーザーがキーワードを入力できるテキスト フィールドがあり、後でサーバーをポーリングするときに記事をフィルター処理するために使用します。approve_filter_itemユーザーが各項目を入力した後にクラスのボタンをクリックして複数のキーワードを入力できるように、またはユーザーがenter各キーワード間のボタンを クリックするだけでよいように、テキスト フィールドを設定しました。

// button to open the keyword filter list
$( "#filter_stories" ).click(
     function(){
       $( "#filter_dialog" ).dialog( "open" );
     }
);

$(".approve_filter_item").click(function(){
  [process the just inserted keyword and then put focus back on the textfield]
});

//listen for enter key when user's focus is on entering a new keyword
$(".new_filter_item").keydown(function (e) {
  if (e.keyCode == 13) {
    $($(this).parents("tr")[0]).find(".approve_filter_item").click();
  }
});

// button to show the post story dialog form
$( "#post_a_story" ).click( 
    function(){
      $( "#new_story_form" ).dialog( "open" );
    }
);

Chrome、FF、Safari のすべてのバージョンで、すべてが期待どおりに機能します。ただし、IE でいくつかの悪い動作が発生しています。

IE ユーザーが#filter_storiesダイアログにキーワードを入力してクリックしたとしますenter。イベントリスナーは期待どおりにトリガーされますkeydownが、トリガーのクリックイベントリスナー#post_a_storyも実行されます。以前はkeyupの代わりに使用keydownしていましたが、その場合#post_a_story、ユーザーが をクリックするとすぐに不思議なことにクリックイベントがトリガーされenter、keyupイベント リスナーはまったくトリガーされませんでした。イベント リスナーを完全に削除すると、post_a_story代わりに別のダイアログ ボックスが開きます。enterキーを押すと無関係なclickイベントがトリガーされるのはなぜですか?

approve_filter_itemユーザーが をクリックする代わりに ボタンをクリックした場合enter、キーワードは期待どおりに処理されることに注意してください。

4

1 に答える 1

0

@bfavaretto が指摘したように、.preventDefault() はこの奇妙な動作に終止符を打ちました。そもそもなんでこんなことになったのかわからない。

于 2013-05-20T16:43:20.127 に答える