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() { } );