How to update style after ajax call in jQuery?

Question

I have dynamicaly added input fields like this one:

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

And when I add this field I call fallowing function:

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");
 });
}

And it didn't add 'make_it_red' class to my input field (I also tried html('foo') and other stuff and it also doesn't work). I think it is becouse I run $(this) inside other function, but I don't know what to do with it. $(this).val() works and I also get correct response (alert(data)). Can anybody help?

Answer 1

You can reference the element by id:

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

Also, it depends on how you've dynamically inserted the element, if you just appended it as a string to some div, for example, it may not be bound to the DOM.

EDIT: you can get the element ID from within the binding, and build the selector within the 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");
 });
}

Answer 2

I think what is happening is that after the callback, the reference to $(this) is lost. Try it this way:

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");
 });
}