jQuery selector de clase no funciona

Question

Tengo dificultades para hacer que aparezca una alerta cuando se hace clic en una etiqueta de anclaje con una clase específica dentro de un div.

Mi sección HTML en cuestión se parece a esto ...

<div id="foo"> 
    <a class='bar' href='#'>Next</a> 
</div> 

La sección de jQuery es la siguiente ..

$('.bar').click(function() 
{ 
    alert("CLICKED"); 
}); 

Mi problema es que no puedo conseguir esta alerta para llegar, Creo que estoy seleccionando correctamente la clase "siguiente", pero no lo detectará por alguna razón. También he intentado casi todo en este page pero nada está funcionando. Si no trato de especificar la etiqueta de anclaje, es decir $ ('# foo'), haga clic en (función() ... entonces funciona, pero habrá múltiples etiquetas de anclaje dentro de este div, por lo que simplemente se ejecutará la alerta cuando el div se hace clic no funcionará para lo que necesito. El sitio web en el que se encuentra es un motor de búsqueda que utiliza ajax para enviar información a do_search.php. Dentro de do_search.php tomo decisiones de paginación en función de cuántos resultados se encuentran, y si corresponde, se pueden hacer y repetir un siguiente, anterior, último y primer enlace.

EDITAR: Acabo de descifrarlo, era mi colocación de la función .next, ya que no se creó en la inicial carga de documentos pero, en cambio, después de que se haya devuelto un resultado, moví la función .next a la parte de éxito de la función ajax ya que allí es donde se crearán los botones si es necesario, ahora funciona.

Answer 1

Trate de usar el comando live():

$(".bar").live("click", function(){ alert(); });

Debido a que cargue el botón a través de AJAX, el evento click no está vinculado a él. Si usa el comando live(), vinculará automáticamente los eventos a todos los elementos creados después de que la página se haya cargado.

Más detalles, here

Answer 2

Seguramente ha perdido $(document).ready(). Su código debe ser:

$(document).ready(function(){ 
     $('.bar').click(function() 
     { 
     alert("CLICKED"); 
     }); 
    }); 

Espero que esto ayude. Cheers

Answer 3

1. Asegúrese de haber incluido correctamente JQuery Library.
2. Asegúrese de que el guión ha escrito entre $(document).ready() in short $(function(){ });

Demostración: http://jsfiddle.net/W9PXG/1/

<div id="foo"> 
    <a class='bar' href='#'>Next</a> 
</div> 

$(function(){ 
$('a.bar').click(function() 
    { 
    alert("CLICKED"); 
}); 
}); 

Answer 4

.live ahora es obsoleto y es la respuesta seleccionada para esto. La respuesta está en los comentarios en la respuesta seleccionada más arriba. Aquí está la solución que se resolvió por mí:

$(document).on('click','.bar', function() { alert(); }); 

Gracias a @Blazemonger para la corrección.