JQuery - Agregar evento de cambio a la lista desplegable

Question

El HTML subyacente para mi menú desplegable tiene una posibilidad de cambio y yo estaba tratando de configurarlo utilizando la opción .live en lugar de la opción .change. no funciona para mi

Lo que tengo actualmente es:

$("#ItemsPerPage").change(function(e) { return updatePaging(); }); 

Desafortunadamente, si actualizo este control a través de $.ajax pierde la definición de eventos. Lo que probé, y no funciona, es:

$("#ItemsPerPage").live("change", function(e) { return updatePaging(); }); 

¿Alguna idea?

Answer 1

En lugar de volver a vincular el <select> cada vez, es mejor que simplemente intercambie sus contenidos (la lista de elementos <option>) en su lugar.

a fin de utilizar esto como ya es:

$("#ItemsPerPage").change(function(e) { return updatePaging(); }); 

pero cuando lo actualiza, simplemente intercambiar sus contenidos (donde newSelectElement es el nuevo <select> elemento):

function updateItemsPerPage(newSelectElement) { 
    $("#ItemsPerPage").empty().append(newSelectElement.childNodes); 
} 

De esta manera, no será necesario actualizar el enlace porque el nodo en sí no se intercambia.

Answer 2

El evento de cambio no es compatible con live(). ¿Qué hay de ejecutar una función al final de cada llamada AJAX que reasigna la definición del evento?

Answer 3

Para más detalles sobre la sugerencia de samiz, lo que tendría que hacer algo como esto:

$(function() { 
    bind_items_per_page(); 
}); 

function bind_items_per_page() { 
    $("#ItemsPerPage").unbind('change').bind('change',function() { 
     updatePaging(); 
    }); 
} 

function updatePaging() { 
    $.post('/some/script',{foo:'bar',bar:'foo'},function(data) { 
     /* what ever you need to do */ 
     // And assuming what ever you did above changed your select box... 
     bind_items_per_page(); 
    }); 
}