copenndthagen
copenndthagen

Reputation: 50810

blur event fired on scroll of div on IE

I have a text box where as soon as a user types something, some suggestions are shown above the textbox. These suggestions are wrapped inside a "div" and can scroll if they exceed some height.

inputFld.on("blur", function(){
//Some code to close the suggestion div if clicked outside inputFld (with check for click on any suggestion item)
});

Thus what the above code does is if the click is outside inputFld, it would hide the "suggestions" div wrapper.

Now the issue is when there are lot of suggestion items and I get a scrollbar. If I try to scroll through the items on IE, the blur event gets fired and it closes the suggestions wrapper div.

This does not happen on other browsers though.

How do I handle this on IE?

Upvotes: 4

Views: 1206

Answers (1)

Pieter
Pieter

Reputation: 1833

You can try to catch all clicks and check if the click was on something else than your suggestion div:

$("body").bind('click', function(e) {

    var target_div_id = e.target.id; //get ID of clicked element

    if (target_div_id !== 'suggestion_div') { //check whether clicked element = suggestion_div

        $('#suggestion_div').hide();

    }

});

Upvotes: 2

Related Questions