seleccionando elementos de dom después de insertar html en una página con ajax

Question

Creé una navegación de pestaña ajax con html insertándose en la página. el código se ve así:

$.ajax({ 
     type: 'POST', 
     url: 'main/ajaxjson/load_course_details', 
     data: {page : which, course_id: id}, 
     success: function(home){ 

      $('#ajax-content ').hide(); 
      $('#ajax-content').empty().append(home); 
      $('#ajax-content').fadeIn(); 
     } 

    }); 

bien ... así que añado mi marca en mi html. Ahora necesito seleccionar elementos dom del html insertado, pero no puedo. Tengo el siguiente código:

<a href="javascript:;" class="light-button">Next</a> 
<select id="chapters-select"> 
    <?php foreach ($chapters as $chapter) : ?> 
    <option value="<?php echo $chapter->id; ?>"><?php echo $chapter->title; ?></option> 
    <?php endforeach; ?> 
</select> 

Aquí genero las opciones de selección dinámicamente. Cuando trato de hacer esto:

$('#chapters-select').change(function(){ 
    alert('changed'); 
}); 

no funciona. ¿Cómo puedo usar javascript después de anexar el html a través de ajax?

Answer 1

caso Uso delegado como on para la versión 1.7+

$('body').on('change', '#chapters-select', function(){ 
    alert('changed'); 
}); 

para aumentar el rendimiento en lugar de body debe escribir la estática más cercano (No añadió dinámico con Ajax o JavaScript) elemento que sostiene "chapters-select

Si está utilizando una versión anterior de jQuery, elija el método apropiado con la siguiente tabla:

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

ondocs:

Cuando se proporciona un selector, el controlador de eventos se refiere como delegado. El controlador no se llama cuando el evento ocurre directamente en el elemento vinculado, sino solo para los descendientes (elementos internos) que coinciden con el selector. jQuery burbujea el evento desde el objetivo del evento hasta el elemento donde está adjuntado el controlador (es decir, el elemento más interno al más externo) y ejecuta el controlador para cualquier elemento a lo largo de esa ruta que coincida con el selector.

Los controladores de eventos están vinculados solo a los elementos actualmente seleccionados; ellos deben existir en la página en el momento en que su código realiza la llamada a .on(). Para asegurarse de que los elementos estén presentes y puedan seleccionarse, realice el evento vinculando dentro de un manejador de documento listo para los elementos que están en el marcado HTML en la página. Si se está inyectando HTML nuevo en la página, seleccione los elementos y adjunte controladores de eventos una vez que el nuevo HTML esté en la página. O bien, use eventos delegados para adjuntar un controlador de evento , como se describe a continuación.

Answer 2

Ejecute esto una vez, después de la primera carga de la página.

$("body").delegate('#chapters-select','change', function(){ 
    alert('changed'); 
}); 

Es equivalente a la respuesta de @ gdoron, pero es compatible con versiones de jQuery mayores de 1,7