jquery click funktioniert nicht bei von Ajax generierten Inhalten

78

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

Klicken Sie auf eine Schaltfläche, die sich in einem Container befindet, aber dann wird ein Ajax-Aufruf ausgeführt und der Inhalt wird mit neuen Inhalten aktualisiert. Wenn ich dann versuche, darauf zu klicken .button, funktioniert dies nicht. Wenn ich auf die Schaltfläche klicke, wird nichts zurückgegeben.

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>
jquery ajax click live stergosz
quelle
1
Bitte zeigen Sie, was vom Ajax-Anruf zurückgegeben wird.
Ron Tornambe
Und der Rest von jQuery, der den Listener anhängt. Was Sie beschreiben, ist genau das, was livedamit umgehen soll. Es ist also seltsam, dass das nicht funktioniert.
Brandan
Ich habe eine Ul, in der ich auf sie klicke und einfach "Test" in Javascript mit .on ("Klick") wiedergebe, aber wenn ich auf die Schaltfläche klicke, wird ein Ajax-Aufruf ausgeführt und die Ul neu geladen, aber dann hört sie auf, nichts zu tun, wenn ich Klicken Sie auf die Schaltfläche. Es wird nichts zurückgegeben.
stergosz

Antworten:

158

Sollte so gemacht werden.

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

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

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

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

Gdoron unterstützt Monica
quelle
Danke für die Antworten! Ich denke immer noch, dass dies sehr seltsam ist und es nicht in Ordnung ist, diesen Weg zu benutzen. Ich wünschte, jquery hätte eine bessere Möglichkeit, mit solchen Situationen umzugehen
Miguel Stevens
1
@ MiguelStevens, lesen Sie die Dokumente weiter, sobald Sie das Konzept gelesen und verstanden haben. Es wird nicht seltsam und macht vollkommen Sinn.
Gdoron unterstützt Monica
Aber wie würde ich Eltern für dieses schreiben ... $ ("input # someId"). Autocomplete ({// some code}); ... hier gibt es kein Ereignis ..
Dragon
1
@Sadaquat, ich schlage vor, eine vollständige Frage mit allen erforderlichen Details in einem anderen Thread zu schreiben. Wenn Sie keine Antwort erhalten, können Sie mich mit einem Kommentar anpingen und ich werde mein Bestes geben, um Ihnen zu helfen.
Gdoron unterstützt Monica
1
Endlich habe ich die Lösung gefunden, nach der ich gesucht habe! Vielen Dank, Sir
KP
40

Ok, ich habe mein Problem gelöst, indem ich die .on () -Funktion korrekt verwendet habe, da mir ein Parameter fehlte.

anstatt

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

ich benutzte

$(".container").on("click", ".button", function() { } );
stergosz
quelle
1
Nur eine Anmerkung, das Selektorargument ist nicht erforderlich , aber in diesem Fall erforderlich.
Jared Farrish
Vielen Dank für die Lösung, +1
Aldry Wijaya
Warum ist das Selektorargument nicht erforderlich, aber in diesem Fall erforderlich?
Ryentzer
Ich denke, das liegt daran, dass der Selektor in diesem Fall erneut ausgeführt wird, aber wenn er nicht enthalten ist, wird er nicht in der ursprünglich ausgeführten Liste der mit dem Selektor erfassten Elemente erfasst.
Bing
8

Anstatt:

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

Ich benutzte:

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

Ich habe das benutzt und es hat funktioniert.

Macc
quelle
3

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

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

Selektor Eine Selektorzeichenfolge 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/

Jared Farrish
quelle