CODEWITHSUNDEEP
javascriptjquerybackbone.jsunderscore.js
David
David

Reputation: 16726

BackboneJS 'click' event not firing when 'focusout' event exists

I have a view in which I trigger dropdown that provides a number of options when a text input is in focus (similar idea to Select2) in BackboneJS:

events: {
   'click .option': 'clickItem',
   'focusin .big-select-input': 'focusIn',
   'focusout big-select-input': 'focusOut'
},

focusIn: function() {
   this.$el.find('.big-select-options').show();
},

focusOut: function() {
   this.$el.find('.big-select-options').hide();
},

clickItem: function() {
   console.log('item clicked');
}


<input type="text" class="big-select-input" />
<div class="big-select-options" style="display:none;">
<div class="option">Item</option>
<div class="option">Item</option>
<div class="option">Item</option>
<div class="option">Item</option>
</div>

What I have noticed, is that the click event for the option doesn't fire when the 'focusout' event exist. If I remove the focusout event (or blur event), the click works.

How can I get the click and focusout to both work at the same time?

Here is a barebones example http://jsbin.com/bivilujili/1/edit?html,js,console,output

Upvotes: 0

Views: 489

Answers (1)

T J
T J

Reputation: 43156

If I understand correctly, you think you're clicking an option but you're not. When you try to click an option the input has to lose focus. When input loses focus you're hiding the option's container. So you can't click it anymore. They just hide.

You need to update your logic to not hide them.

Upvotes: 2

Related Questions