jQuery cambiamento evento su <select> non sparare in IE

Question

Ho una pagina con un numero variabile di elementi <select> (il che spiega il motivo per cui sto utilizzando la delega evento qui). Quando l'utente modifica l'opzione selezionata, voglio nascondere/mostrare aree di contenuto diverse nella pagina. Ecco il codice che ho:

$(document).ready(function() { 
    $('#container').change(function(e) { 
    var changed = $(e.target); 

    if (changed.is('select[name="mySelectName"]')) { 
     // Test the selected option and hide/show different content areas. 
    } 
    }); 
}); 

Questo funziona in Firefox e Safari, ma in IE l'evento di modifica non si attiva. Qualcuno sa perché? Grazie!

Answer 1

L'evento change non significa bolla in IE (Vedi here e here). Non è possibile utilizzare la delega degli eventi in tandem con esso.

In realtà, è a causa di questo bug di IE che jQuery live doveva escludere ufficialmente change dalle list of supported events (FYI gli stati DOM spec change should bubble) . ^[1]

Per quanto riguarda la tua domanda, è possibile associare direttamente a ciascun selezionare:

$('#container select').change(/*...*/) 

Se si vuole veramente la delega evento si potrebbe trovare un certo successo cercando ciò this person did e legarsi a click in IE solo, che fa bolla:

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) { 
    /* test event.type and event.target 
    * to capture only select control changes 
    */ 
}) 

Ma questo rilevamento del browser sembra davvero sbagliato. Vorrei davvero provare a lavorare con l'esempio precedente (vincolante direttamente al menu a discesa). A meno che tu non abbia centinaia di caselle <select>, la delegazione di eventi non ti comprerebbe molto qui.

---

_{[1] Nota: jQuery> = 1,4 ora simula un evento di bubbling change in IE via live()/on().}

Answer 2

Sto cercando di capire perché è necessario ricontrollare il nome della selezione dopo aver ricevuto un evento.

Avete per caso più elementi con lo stesso id?

In realtà intendevi dire "#container select" anziché "#container"?

Answer 3

Idea che potrebbe aiutare:

$(document).ready(function() { 
    $('#container select[name="mySelectName"]').change(function(e) { 
    var s = $(e.target); 
    if (s.val()=='1') //hide/show something; 
    }); 
}); 

Se si sta utilizzando AJAX, provare live() funzione:

$(document).ready(function() { 
     $('#container select[name="mySelectName"]').live('change', function(e) { 
     var s = $(e.target); 
     if (s.val()=='1') //hide/show something; 
     }); 
    }); 

Answer 4

Se ricordo bene avrete bisogno di chiamare blur() per avere jQuery invocare il cambiamento() su macchine di IE. Provare qualcosa di simile:

$("select[name=mySelectName]").click(function() { 
    $(this).blur(); 
});