wake-up-neo.net

JQuery Click funktioniert nicht bei Ajax-generierten Inhalten

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

klicken auf eine Schaltfläche, die sich auf einem Container befindet, aber dann wird ein Ajax-Aufruf ausgeführt und der Inhalt wird mit neuen Inhalten aktualisiert. Wenn ich dann versuche, auf .button zu klicken, wird nichts zurückgegeben, wenn ich drück den Knopf.

Ich habe es sogar versucht

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

oder

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

Wie kann ich es zum Laufen bringen?

EDIT: mein html:

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

Sollte auf diese Weise erfolgen.

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

Wenn Sie einen Container haben, der sich während der Ajax-Anforderung nicht ändert, ist dies performanter:

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

Binden Sie das Delegate-Ereignis immer an das nächste statische Element, das die dynamischen Elemente enthält.

148
gdoron

Ok, ich habe mein Problem mit der Funktion .on () richtig gelöst, da mir ein Parameter fehlte.

anstatt

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

ich benutzte

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

Anstatt:

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

Ich benutzte:

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

Ich habe das benutzt und es hat funktioniert.

8
Macc

Versuchen Sie das zu tun? Beachten Sie, dass ich die Funktion $.on() auf das übergeordnete Element lege, aber für die Aktion .button Auswähle.

.on (Ereignisse [ Selektor] [ Daten], Handler (eventObject))

selector Eine Auswahlzeichenfolge zum Filtern der Nachkommen der ausgewählten Elemente, die das Ereignis auslösen. Wenn der Selektor null ist oder weggelassen wird, wird das Ereignis immer ausgelöst, wenn es das ausgewählte Element erreicht.

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

Eine weitere Demonstration:

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