Question

This question has been asked tons of times, however I don’t see any answer for the ‘multiple’ variety:

http://jsfiddle.net/queZ6/107/

When you tab INTO the box, i want to display an alert and capture the focus event. I’m basically wanting to change the highlighting for an element that surrounds each input, that follows along as you fill out the form. It’s basically a signal to the user to easily see what field their on.

I can’t for the life of me figure out how to capture the focus event though tabbing into the box (or also clicking on it obviously).

I dont see why this is difficult, considering you’re typing INTO an input. Cant javascript see the newly created input (that youre typing into) and bind to that? JS is so confusing to me sometimes :S

Answer 1

Update:

While the old answer stated that you cannot bind into dynamically created elements(and this is still true to a degree), updates to the plugin in question have made this no longer a problem.

While the plugin in question still has a problem of triggering the handler multiple times, in the case of an alert message being used, it is now possible to bind to those dynamically created elements thanks to the updates.

All one must do in order to do this is bind, via .on(), to the chosen:showing_dropdown event on the original targeted select list.

To solve the problem of the continuously created alert boxes, however, I decided to use underscore.js’s .debounce() method, so it is only triggered once immediately every 1 second.

The underscore library is by no means required, however you will need to have some sort of debounce function in order to get around that small quirk.

var debouncedAlert = _.debounce(window.alert, 1000, true);
$('#select').chosen();

$('#select').on('chosen:showing_dropdown', function(e){
    e.preventDefault();
    e.stopPropagation();
    debouncedAlert('focused');
});

Working example:

$(document).ready(function() {
    var debouncedAlert = _.debounce(window.alert, 1000, true);
    $('#select').chosen();

    $('#select').on('chosen:showing_dropdown', function(e){
        e.preventDefault();
        e.stopPropagation();
        debouncedAlert('focused');
    });
    
    $('button').click(function() {
        $('#select').trigger('chosen:open');
    });

});

body {
    margin: 10px;
}

select {
    width: 200px;
}

<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="text" value="Put your cursor here then Press Tab. Chosen will be focused!" style="width:100%">
<br>
<select id="select" multiple>
    <option value="1">abc</option>
    <option value="2">def</option>
    <option value="3">ghi</option>
</select>
<br>
<button>Press this button. Now chosen <b>will</b> be focused! :)</button>

Old answer:

No, it can’t. Jquery’s regular method of binding will not work with dynamically-created elements. In order to bind to those types of elements, you need .on().

$('.chzn-choices').focus(function(e){
    e.preventDefault();
    alert('focused!');
});

Would be changed to:

$('#select_chzn').on('focus', '.chzn-choices', function(e){
    e.preventDefault();
    alert('focused!');
});

In this case, you are delegating the event to the container elemen, and then pointing it to your specific element.

Working example