evento - removeattribute jquery

jquery click no funciona en ajax contenido generado

Question

Estoy usando $(".button").on("click", function(){ });

hacer clic en un botón que está en un contenedor pero luego se hace una llamada ajax y el contenido se actualiza con cosas nuevas y luego cuando intento hacer clic en .button no funcionará ... no se devolverá nada cuando haga clic en el botón.

Incluso intenté

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

o

$(".button").click(function(){ });

¿Cómo puedo hacer que funcione?

EDITAR: mi html:

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>

Answer 1

¿Es esto lo que estás tratando de hacer? Tenga en cuenta que estoy poniendo el $.on() en el elemento primario, pero seleccionando el .button Para la acción.

.on (eventos [, selector] [, datos], controlador (eventObject))

selector Una secuencia de selector para filtrar los descendientes de los elementos seleccionados que desencadenan el evento. Si el selector es nulo u omitido, el evento siempre se desencadena cuando alcanza el elemento seleccionado.

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

<div id="stuff">
    <button class="button">Click me!</button>
    <p>Stuff</p>
</div>

var $stuff = $(''#stuff''),
    ajaxContent = $stuff.html();

$stuff.on(''click'', ''.button'', function(){
    $.get(''/echo/html/'', function(){
        $stuff.empty();
        console.log($stuff.html());
        alert($stuff.html()); // Look behind, #stuff is empty.
        $stuff.html(ajaxContent);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/1

Otra demostración:

var $stuff = $(''#stuff''),
    ajaxContent = $stuff.html(),
    $ajaxContent,
    colors = [''blue'',''green'',''red''],
    color = 0;

$stuff.on(''click'', ''.button'', function(){
    $.get(''/echo/html/'', function(){
        color++;
        if (color == colors.length) color = 0;
        console.log($stuff.html());
        alert($stuff.html());
        $ajaxContent = $(ajaxContent);
        $stuff.append($ajaxContent).css(''color'', colors[color]);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/2/

Answer 2

Debería hacerse de esta manera.

$(''body'').on(''click'', ''.button'', function (){
        alert(''click!'');
    });

Si tiene un contenedor que no cambia durante la solicitud de AJAX, esto es más eficiente:

$(''.container'').on(''click'', ''.button'', function (){
        alert(''click!'');
    });

Siempre vincule el evento delegado al elemento estático más cercano que contendrá los elementos dinámicos.

Answer 3

En lugar de:

$(".button").on("click", function() { } );

Solía:

$(".container").on("click", ".button", function() { } );

Lo he usado y funcionó.

Answer 4

Ok, resolví mi problema utilizando correctamente la función .on () porque me faltaba un parámetro.

en lugar de

$(".button").on("click", function() { } );

solía

$(".container").on("click", ".button", function() { } );