.focus(function) With Multiple Chosen

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 a

Solution 1:

Because the element is created dynamically, you will need to use event delegation, using jquery's on. This will allow you to attach a handler before the element exists.

$('.chzn-choices').focus(function(e){

would instead be

$("container").on("focus", '.chzn-choices',function(e){

where container is a selector for some static ancestor element which is not dynamically loaded. If no such container exists, document can be used, though this is to be avoided where possible.

Solution 2:

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;
}

<linkhref="https://harvesthq.github.io/chosen/chosen.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://harvesthq.github.io/chosen/chosen.jquery.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script><inputtype="text"value="Put your cursor here then Press Tab. Chosen will be focused!"style="width:100%"><br><selectid="select"multiple><optionvalue="1">abc</option><optionvalue="2">def</option><optionvalue="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