web-dev-qa-db-fra.com

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

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 ... cliquez 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>
jqueryajaxclicklive
76
fxuser

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.

148
gdoron

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

Au lieu de:

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

J'ai utilisé:

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

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

8
Macc

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

.on (événements [ sélecteur] [ données], gestionnaire (eventObject))

selector Chaîne de sélecteur permettant de filtrer les descendants des éléments sélectionnés 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/

3
Jared Farrish