JQuery ajax this.id undefined

У меня есть список элементов, которые я удаляю с помощью AJAX.

Этот список представляет собой простой список с div и каждый div как идентификатор, поэтому, когда элемент удаляется из базы данных, я возвращаю true, а затем удаляет строку.

Здесь мой код:

HTML

<div id="row1">
<div>item1</div>
<div><a href="...">view</a></div>
<div><a id="1">delete</a></div>
</div>

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + this.id).remove();
            }
        }
    });
});

По какой-то причине this.id не работает, потому что this.id есть undefined... почему? У меня есть id="1" на моем href.

Ответы

Ответ 1

Используемое вами значение относится к объекту ajax, потому что в этой функции есть новая область. Если вы хотите получить доступ к переменным по всей вашей области, вы должны объявить их перед вызовом ajax.

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    var _this = this;
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + _this.id).remove();
            }
        }
    });
});

Ответ 2

Ваш идентификатор не должен начинаться с номера. Вот как сформулировать действительный id: Каковы допустимые значения для атрибута id в HTML?

this в вашей функции обратного вызова успеха не относится к this в вашей функции обработчика кликов. Поэтому вам нужно сделать ссылку на this в вашем обработчике кликов, чтобы он мог получить доступ к вашей функции обратного вызова:

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    var that = this;
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + that.id).remove();
            }
        }
    });
});

Ответ 3

попробуйте объявить перед $.ajax $this

like:

var $this = this;

и используйте переменную.

$('.delete').click(function () {
   var $this = this;

  if (!confirm('Are you sure you want to delete?')) {
      return false;
  }

  $.ajax({
      type: "POST",
      url: '/delete_record',
      data: 'id=' + $this.id,
      cache: false,
      success: function (result) {
          if (result == 'good') {
              $('#row' + $yourid).remove();
          }
      }
 });
});

Ответ 4

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }

    var id = this.id; // here is the magic

    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + id).remove();
            }
        }
    });
});

Ответ 5

Я не вижу ни одного элемента с классом "delete" в вашем html. Предполагая, что это ссылка удаления, вам нужно получить идентификатор с $(this).attr('id') вместо this.id.