blur event fired on scroll of div on IE

Question

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?

Answer 1

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();

    }

});