I have a website that has several buttons that open different jQuery ui dialog boxes.
Inside one of those dialogs (with an id of filter_story) is a text field in which a user can type in keywords that I use later to filter stories when polling the server. I have the text field set-up so that a user can enter several keywords, clicking a button of class approve_filter_item after entering each item, or the user can simply click the enter button between each keyword.
// 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" );
}
);
Everything works exactly as expected in all versions of Chrome, FF and Safari. I'm experiencing some bad behavior, however, in IE.
Say an IE user enters a keyword in the #filter_stories dialog, and then clicks enter; what happens is the keydown event listener triggers as expected, but after it executes the click event listener for #post_a_story also triggers. Previously, I used keyup instead of keydown, and in that case the #post_a_story click-event mysteriously triggered immediately when a user clicked enter, and my keyup event listener never triggered at all. If I remove the post_a_story event listener altogether, another one of my dialog boxes opens up instead. Why is an enter key press triggering unrelated click events?
Note that if the user clicks the approve_filter_item button instead of clicking enter, the keyword is processed just as expected.