2013-08-01 6 views
6

Ich habe eine Schaltfläche mit dem Attribut 'geladen' und Anfangswert von 'Nein' erstellt. Nachdem ich auf den Button geklickt habe, starte ich etwas Ajax und am Ende versuche ich, das Attribut 'loaded' auf 'yes' zu setzen, damit der Ajax nicht erneut ausgeführt wird, wenn der Benutzer mehrmals auf den Button klickt .Mit jQuery .attr oder .prop, um Attributwert nicht funktioniert

Ich habe so etwas wie dies: http://jsfiddle.net/PDW35/2/

Klick auf die Schaltfläche ändert sich nicht geladen ‚Ja‘. Wenn Sie jedoch einen Alarm direkt nach dem .attr Aufruf wie folgt tun:

alert($(this).attr('loaded')); 

das Warnfeld ‚Ja‘ enthält, die einmal der Benutzer klickt nicht, weil hilft, über den gleichen Code ein aufstellt 'no' Alarmbox auf dem Bildschirm.

Alles verhält sich genauso, wenn ich .prop anstelle von .attr. Fehle ich hier einen Punkt oder funktionieren .prop und .attr einfach nicht mit benutzerdefinierten Attributen?

EDIT: Aktualisiert jsfiddle mit Ajax basierend auf den Kommentaren unten: http://jsfiddle.net/PDW35/5/

+1

Sie sehen den ursprünglichen Quellcode bei der Überprüfung des Attributs 'loaded' zufällig an? Weil es in Chrome in dieser Geige funktioniert. – CodingIntrigue

+0

Immer wenn ich zum zweiten Mal auf die Schaltfläche klicke, wird "ja" angezeigt. Das Attribut ist richtig eingestellt. Versuchen Sie jedoch, erlaubte Attribute zu verwenden, die mit 'data-' beginnen, und verwenden Sie die jQuery-Funktion 'data()', um mit ihnen zu arbeiten. –

+0

Wenn Sie ein eigenes Attribut erstellen, setzen Sie ihm "data-' "voran. Attributnamen dürfen keine Unterstriche enthalten. – Blender

Antwort

3

ich bin nicht ganz sicher der Grund, warum der ursprüngliche Code funktioniert nicht, aber die $this scheint aus irgendeinem Grund die Ursache zu sein. Probieren Sie das unten und es scheint zu funktionieren. Fiddle ist hier.

Ich werde versuchen, die Antwort mit dem Grund zu aktualisieren, sobald ich es finde.

var loaded = $(".preview-button").attr('data-loaded'); 
if (loaded === "no") { 
    $.ajax({ 
     success: function (result) { 
      $(".preview-button").attr('data-loaded', 'yes'); 
      alert($(".preview-button").attr('data-loaded')); 
     } 
    }); 
} else { 
    alert("data loaded"); 
} 

Siehe diese thread und dies scheint der Grund zu sein, warum die $this scheint nicht aus dem Innern des AJAX-Aufruf zu arbeiten.

+0

Das ist interessant, du hast recht !!! Funktioniert jetzt, wenn ich den Grund finde, warum $ das fehlschlägt, werde ich auch hier posten! – mmvsbg

+0

Ich denke, dass $ (this) nur innerhalb der .ajax-Erfolgsfunktion nicht definiert (oder wahrscheinlicher vordefiniert) ist. Sehen Sie sich die folgende JSfiddle an: http://jsfiddle.net/PDW35/8/ Die erste Alarmbox zeigt die Klasse der Taste an, die zweite sagt nur 'undefiniert'. – mmvsbg

+2

@mmvsbg kein Kumpel, überprüfen Sie das Update, das ich auf die Antwort gemacht habe. Innerhalb des Ajax-Aufrufs bezieht sich $ auf den Aufruf und nicht auf Ihre Schaltfläche, die das Ereignis ausgelöst hat. Dies ist der Grund, warum die erste Warnung (außerhalb der Ajax) funktioniert und die andere (innen) nicht. – Harry

1

die Frage zu lesen ..

, so dass die Ajax lief nicht mehr, wenn der Benutzer auf die Schaltfläche klickt mehr als Einmal.

Ich glaube, Sie brauchen one(), erlaubt es das Ereignis nur einmal ausführen .. keine Notwendigkeit, die Attribute ändern und Eigenschaften

Beispiel

$(".preview-button").one('click',function(){ 
//your ajax stuff 
    alert('clicked!!!!'); 
}); 
+0

Das ist ein guter Tipp, aber eines der anderen Dinge, die ich mit einem Klick auf den Button mache, ist .slideToggle ein div, das mehr als einmal passieren muss. Ich möchte nur einmal die Ajax laden (was innerhalb der div, die auf und ab gleitet) geht. – mmvsbg

0

Sie Eigenschaft für Ihre click einstellen (oder submit) Funktion:

$(".preview-button").click(function() { 
    this.ajaxCompleted = this.ajaxCompleted || false; 

    if (!this.ajaxCompleted) { 
     // run your request and set this.ajaxCompleted to true in a callback; 
    } 

    // do other stuff 
}); 
0

könnten Sie die folgenden versuchen Fehlercode: Wenn Sie einmal auf die Daten geklickt haben, wird durch einen zweiten Klick darauf hingewiesen, dass die Daten bereits geladen sind.

$(".preview-button").click(function(){ 

var id = $(this).attr('button_id'); 
var loaded = $(this).attr('loaded'); 
    if(loaded == "no"){   
     $(this).attr('loaded', 'yes'); 
    }else{ 
     alert("Data is loaded");  
    } 
}); 

Arbeitsbeispiel hier: http://jsfiddle.net/PDW35/4/