2010-02-23 35 views
5

Así que aquí está mi código:Cómo enlazar evento tras el éxito Ajax en jQuery

$(document).ready(function() { 
$('#form').bind('change', function(){ 
    $.ajax({ 
    type: 'get', 
    url: 'api.php', 
    data: 'task=getdirs&formname='+$('#form').attr('value'), 
    dataType: "text", 
    success: function (html){ 
     $('#chdir').html(html); 
     $('#chdir select').bind('change', getDirs()); 
     } 
    }); 
}); 
function getDirs(){ 
}}) 

#form aquí tiene un elemento <select>. La llamada ajax devuelve un trozo de html con un nuevo elemento <select>.
Funciona bien: en el #chdir div obtengo un nuevo elemento desplegable. Pero el evento dentro de la pieza success se dispara solo una vez. Entonces este evento ya no funciona.
¿Qué puedo hacer para que el elemento recién creado <select> funcione de la misma manera que el primero?

Respuesta

10

Está invocando la función getDirs directamente en la llamada al método bind, solo debería hacerlo si esta función devuelve otra función, pero creo que no es el caso.

Cambio:

$('#chdir select').bind('change', getDirs()); 

Para:

$('#chdir select').bind('change', getDirs); 

O si está utilizando jQuery 1.4 o superior, puede enlazar el evento change con el método live sólo una vez, y usted no tendrá que volver a vincular el evento después de eso:

$(document).ready(function() { 
    $('#chdir select').live('change', getDirs); 
}); 
+0

Tengo una pregunta. Espero que puedas ayudarme. la pregunta está aquí: http: //stackoverflow.com/questions/6276079/ – kamal

+0

Cuidado con el método directo. En el jquery 1.7 está en desuso y en 1.9 se eliminó (http://api.jquery.com/live/). (Sé que es una pregunta muy antigua pero estoy buscando el mismo problema al que he llegado aquí) – Yises

0

En lugar de usar bind, intente utilizar .live. Necesitará la última versión de jQuery para hacer eso.

2

Si te entiendo correctamente, el problema es que el evento no funciona con tu elemento de selección creado dinámicamente.

Si es así, la solución es simple ... intente esto:

$('#form').live('change', function()... 

Actualización: Con las nuevas versiones de jQuery que tienen que utilizar en lugar de on()live().

+0

Esto se asegurará de que el evento se une cada vez. –

+0

Actualizada para mencionar en() es la nueva forma de hacerlo con cambios recientes de jquery api –

3

Porque este SO después entró en mi búsqueda de google, pensé que debería mencionar que .live ya no se utiliza como de 1,9, y el método recomendado es ahora .on

http://api.jquery.com/on/

0

De la API de jQuery:

Como de jQuery 1.7, el método .live() está en desuso. Use .on() para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() en preferencia a .live().

Por lo tanto, debe utilizar .delegate() si está trabajando con una versión de jQuery anterior a la 1.7.

http://api.jquery.com/live/

1

Si estás usando jQuery 1.9+, .on método debería utilizarse para asociar controladores de eventos. Sin embargo, después de anexar HTML al documento, todavía tiene que adjuntar controladores de eventos nuevos.

Para escribir pequeña pieza de código sencillo, trabajar y manejar nuevos elementos que se pueden utilizar en el documento: .on

$(document).on('click', '.close-icon', function() { // selector as a parameter 
    $(this).parent().fadeOut(500); // - example logic code 
}); 
Cuestiones relacionadas