Cliquez et REORGAN ne fonctionne pas pour les options jquery-Select2

Question

J'utilise la bibliothèque jquery-Select2 pour mettre en œuvre mes listes déroulantes.

Dans mon cas, je voudrais être en mesure de déclencher une action après un utilisateur clique sur l'option dans la liste déroulante. Cependant, le clic ou l'événement de changement ne semble pas fonctionner

fichier haml:

%select.medium.name_selector.pull_left 
    %option.placeholder{value:"placeholder", disabled: "disabled", selected: "selected"} Start or find a conversation with a muser 
    %option{value: "nick"} nick 
    %option{value: "sam"} sam 
    %option{value: "john} john 

fichier coffeescript:

events: 
    "click option" : "displayChatScreen" 

displayChatScreen: (e) -> 
    e.preventDefault() 
    nickname = @$("select.name_selector option:selected").val() 
    if nickname != "placeholder" 
    Backbone.history.navigate "messages/#{nickname}", 
     trigger: true 
    else 
    alert "You need to select a friend to chat" 

Y at-il de toute façon à déclencher l'action une fois que je changer l'option de ma liste déroulante select2?

Note: J'ai essayé les deux clic et modifier les événements et ils ont tous deux ne fonctionnent pas

Answer 1

Avec select2 vous ne pouvez pas utiliser l'événement change normale comme vous le feriez pour un widget <select> normal, mais vous avez réellement besoin d'attacher votre méthode displayChatScreen au change handler provided by select2.

par exemple.

$('select.medium.name_selector').on('change', this.displayChatScreen); 

En supposant que c'est le sélecteur pour votre widget select2 et que vous l'exécutez dans le contexte approprié.

Lorsque vous utilisez la valeur par défaut events hachage fourni par Backbone, vous faites vraiment ceci:

$el.on('change', 'option', this.displayChatScreen); 

Depuis select2 remplace en fait les <select> (et donc <option> balises avec une <ul><li> paire) vous ne serez jamais effectivement recevoir l'événement du navigateur.

De plus, l'événement change se déclenche sur le parent <select> et non sur l'élément <option>.

Answer 2

Vous pouvez éviter la question tous ensemble en ne rendant pas les options et le passage à la place comme une option au select2 lors de l'initialisation. .

Vous pouvez faire une balise d'entrée comme ceci:

<input name="someName" value="selectedValues"> 

initialize Puis select2 avec les options comme celle-ci: $ ('entrée [name = "UnNom"]') Select2 (options);

Cela vous permettra d'écouter en toute sécurité les modifications apportées à l'entrée comme vous le feriez régulièrement en utilisant le hachage des événements.