Wie aktualisiert man den Stil nach dem Ajax-Aufruf in jQuery?

Question

Ich habe dynamicaly hinzugefügt Eingabefelder wie diese:

<input id="person__1_badge_number" class="number" type="text" size="12" name="person[][1][badge][number]"/> 

Und wenn ich dieses Feld hinzufügen nenne ich fallowing Funktion:

function please_rebind() { 
    $('.number').bind("change", function() { 
    $.post('/registration/sell/check_badge_number', { number: $(this).val() }, 
    function(data) { 
     $(this).addClass('make_it_red'); 
     alert(data); 
    }, "html"); 
}); 
} 

Und es nicht hinzu, ‚make_it_red‘ Klasse meines Eingang Feld (Ich habe auch versucht, html ('foo') und andere Sachen und es funktioniert auch nicht). Ich denke, es ist, weil ich $ (this) innerhalb anderer Funktionen laufen lasse, aber ich weiß nicht, was ich damit machen soll. $ (this) .val() funktioniert und ich bekomme auch korrekte Antwort (Alarm (Daten)). Kann jemand helfen?

Answer 1

Ich denke, was passiert ist, dass nach dem Rückruf, der Verweis auf $ (this) ist verloren. Versuchen Sie es so:

function please_rebind() { 
    $('.number').bind("change", function() { 
    var that = $(this); 
    $.post('/registration/sell/check_badge_number', { number: $(this).val() }, 
    function(data) { 
     that.addClass('make_it_red');   
    }, "html"); 
}); 
} 

Answer 2

Sie können das Element von ID-Referenz:

$('#person__1_badge_number').addClass('make_it_red'); 

Auch hängt es davon ab, wie Sie das Element dynamisch eingefügt haben, wenn Sie es gerade als String zu einem gewissen div angehängt, zum Beispiel, kann es nicht an das DOM gebunden sein.

EDIT: Sie können die Element-ID erhalten aus der Bindung, und bauen die Wähler innerhalb der Callback:

function please_rebind() { 
    $('.number').bind("change", function() { 
    var elementId = this.id; 
    $.post('/registration/sell/check_badge_number', { number: $(this).val() }, 
    function(data) { 
     $('#' + elementId).addClass('make_it_red'); 
     alert(data); 
    }, "html"); 
}); 
}