Call jQuery-Funktion nach ajax html geladen

Also ich habe 2 jQuery-Funktionen gespeichert .js-Datei und .js-Datei geladen wird, vor dem head-tag

was ist .js-Datei:

$(document).ready(function(){

    $("#button1").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button2.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

    $("#button2").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button1.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

});

Also nach Körper ich habe:

<div id="button_div"><input type="button" id="button1" value="Press"></div>

wenn der button1 gedrückt wird, laden Sie die php-Datei mit dem Namen button2.php mit dem div und button2-code, aber hier, wenn button2 gedrückt wird, führt nicht den button2 klicken Sie auf Funktion.

Warum?

Wenn ich die jQuery-code von button2 innen button2.php Datei nach Elementen funktioniert Prima. Aber ich will nicht, dass. Ich will, dass die jQuery-Zeilen gespeichert, nur in einem .js-Datei und nur vor </head> tag. Ich will nicht die jQuery-Zeilen, nach-Elemente.

In der ersten $(#button_div).html(html) ist fehlende Zitate $("#button_div").html(html). auch diese beiden ajax-Aufrufe könnte getan werden, mit ein und verwenden Sie die Schaltflächen-id zu füllen url

InformationsquelleAutor Mando Madalin | 2013-01-31

7

Beim Aufruf $("#button2").click(), #button2 noch nicht vorhanden ist, so, Sie nennen es an nichts. Um das click-Ereignis funktioniert, müssen Sie mithilfe von Ereignis-delegation (d.h. Bindung an ein element, das existiert) etwa so:
```
$(document).on('click', '#button2', function () {
```
Dann, jeder Zeit #button2 Hinzugefügt wird, klicken Sie auslösen, die event-callback.

(Ich benutze document als ein Beispiel, aber versuchen, einen Vorfahren, der näher an #button2 als das).

InformationsquelleAutor Explosion Pills
3

Es funktioniert nicht, weil dein Selektor nicht wieder ein element, wenn Sie zuerst nennen. $('#button2') nur einmal aufgerufen wird und nicht überwacht, das DOM für Veränderungen.

Verwenden Sie die event-delegation-syntax statt:
```
$('#parent').on('click', '#button2', function() {
    ...
});
```
Auch Ihre AJAX-request vereinfacht werden können, ein wenig:
```
$("#button1").click(function() {
    $('#button_div').load('button2.php');
});
```
- Ich glaube, dass Sie nur $("#button2").on("click", function () {}); Recht?
- Nicht wirklich. .on() ist nicht .live(). Mit der Veranstaltung delegation syntax, du bist wirklich die Bindung des Ereignishandlers an das übergeordnete element und dann rinnt das Ereignis an das untergeordnete element entspricht, die zweite Auswahl.
- Das ist falsch für den Fall, dass Sie behandeln möchten, klicken Sie auf Ereignisse, wenn #button2 noch nicht vorhanden. Sie müssen verwenden Sie die event-delegation-syntax in diesem Beispiel gezeigt.
InformationsquelleAutor Blender
0

kannst du die Inhalte der beiden button1.php und button2.php ich nehme an,

button1.php=
```
<input type="button" id="button2" value="Press">
```
button2.php=
```
<input type="button" id="button1" value="Press">
```
?

InformationsquelleAutor andrew.butkus

In dir button1 click-Funktion:

$("#button1").click(function(){
    $.ajax({
        type: 'GET',
        url: 'button2.php',
        success: 
            function(html){
                $("#button_div").html(html) //You forgot pass the selector as a string
            }
        ,
    });     
});

Dies kann Ihr problem lösen. Auch, wenn Ihr jQuery aufgerufen wird, vor das element erstellt wurde (denken Sie daran, es ist von oben nach unten), wird es nicht funktionieren.

InformationsquelleAutor turnt

0

Es ist, weil #button2 existiert nicht auf der Seite, die beim erstellen des click-handler. Sie benötigen on() mit seiner Unterstützung für Delegierte Ereignissen zu tun, was, die Sie suchen, zu tun.
```
$(document).on('click', '#button2', function() {
    $.ajax({
        type: 'GET',
        url: 'button1.php',
        success: 
            function(html){
                $('#button_div').html(html)
            }
    });     
});
```
Idealerweise konnten Sie Holen Sie ein element auf der Seite vorhanden ist, vor der Schaffung von #button2 enthält #button2 dass man anbringen könnte, die event-handler, anstatt document.

InformationsquelleAutor Mike Brant

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.