如何在 jQuery 中调用 ajax 后更新样式？

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() 有效，我也得到了正确的响应（警报（数据））。有人可以帮忙吗？

Answer 1

你可以通过id引用元素：

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

此外，这取决于您如何动态插入元素，例如，如果您只是将其作为字符串附加到某个 div，它可能未绑定到 DOM。

编辑：您可以从绑定中获取元素 ID，并在回调中构建选择器：

 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

我认为发生的事情是在回调之后，对 $(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");
 });
}