Как обновить стиль после вызова ajax в jQuery?

Question

У меня есть динамически добавленные поля ввода, подобные этому:

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

И когда я добавляю это поле, я вызываю следующую функцию:

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

И это не добавило класс 'make_it_red' в мое поле ввода (я также пробовал html ('foo') и другие вещи, и это также не работает) Я думаю, потому что я запускаю $ (this) внутри другой функции, но я не знаю, что с этим делать. $ (this) .val () работает, и я также получаю правильный ответ (alert (data)). Кто-нибудь может помочь?

Answer 1

Я думаю, что после обратного вызова ссылка на $ (this) теряется. Попробуйте это так:

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

Вы можете ссылаться на элемент по id:

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

Кроме того, это зависит от того, как вы динамически вставили элемент, если вы просто добавили его в виде строки к некоторому элементу div, например, он может быть не привязан к DOM.

РЕДАКТИРОВАТЬ: вы можете получить идентификатор элемента из привязки и построить селектор в обратном вызове:

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