jquery click ne fonctionne pas sur le contenu généré par ajax

Question

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

cliquer sur un bouton qui se trouve sur un conteneur, puis un appel ajax est effectué et le contenu est mis à jour avec de nouveaux éléments, puis lorsque j'essaie de cliquer sur .button cela ne fonctionnera pas ... rien ne sera renvoyé lorsque Je clique sur le bouton.

J'ai même essayé

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

ou

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

Comment puis-je le faire fonctionner?

EDIT: mon 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

Devrait être fait de cette façon.

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

Si vous avez un conteneur qui ne change pas pendant la requête ajax, ceci est plus performant:

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

Liez toujours l'événement délégué à l'élément statique le plus proche qui contiendra les éléments dynamiques.

Answer 2

Ok, j'ai résolu mon problème en utilisant la fonction .on () correctement car il me manquait un paramètre.

au lieu de

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

j'ai utilisé

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

Answer 3

Au lieu de:

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

J'ai utilisé:

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

J'ai utilisé cela et cela a fonctionné.

Answer 4

Est-ce que vous essayez de faire? Remarque, je suis en train de mettre la $.on() sur le parent, mais la sélection de l' .button pour l'action.

.sur les événements [, selector] [, données], maître(eventObject) )

sélecteur sélecteur de chaîne pour filtrer les descendants de la sélection les éléments qui déclenchent l'événement. Si le sélecteur est null ou omis, l'événement est toujours déclenché lorsqu'il atteint l'élément sélectionné.

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

Une autre démonstration:

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/