Question

我已经动态添加了像这样的输入字段：

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

当我添加这个字段时，我称之为fallowing功能：

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。

编辑：您可以从绑定中获取元素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");
 });
}

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

2 个答案: