jQuery: ссылка на вызывающий объект (this), когда событие bind / click предназначено для класса

Question

Спасибо, что прочитали это.

Я динамически генерирую некоторые данные, которые включают раскрывающийся список выбора с текстовым полем рядом с ним. Если пользователь нажимает кнопку выбора, я динамически заполняю ее (код ниже). У меня есть класс для выбора, и я надеялся, что следующий код будет работать. Я проверил это с идентификатором на избранном и помещая ЕДИНИЦУ в удостоверение личности, я заставил это работать. Однако при изменении кода для ссылки на класс (поскольку будет несколько групп данных, включающих выбор с текстовым полем рядом с ним) и $(this), я не смог заставить его работать. Любые идеи будут полезны. Спасибо

Релевантность текстового поля рядом с выбором - это вторая часть кода ... для обновления текстового поля, когда опция выбрана в выборе

.one означает, что выбор обновляется только один раз, тогда .bind позволяет помещать любые выбранные опции в смежное текстовое поле.

$('.classSelect').one("click",
 function() {
  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(this).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(this).bind("click",
   function() {
    $(this).next().val($(this).val());
  }); // End BIND
 }); // End One

 <select id="mySelect" class="classSelect"></select>
 <input type="text">

Answer 1

$(this) относится только к сфере действия функции. вне функции она теряет эту ссылку:

$('.classSelect').one("click", function() {
   $(this); // refers to $('.classSelect')

   $.ajax({
   // content
      $(this); // does not refer to $('.classSelect')
   });
});

лучший способ справиться с этим может быть:

$('.classSelect').one("click", function() {
    var e = $(this);

    $.ajax({
    ...
        success : function(request) {
          e.html(request);
        }
    }); // end ajax

    $(this).bind('click', function() {
    // bind stuff

    }); // end bind

}); // end one

кстати, вы знакомы с методом load()? мне проще для базового AJAX (поскольку он действует на упакованный набор, вместо того, чтобы быть автономной функцией, такой как $.ajax(). Вот как я бы переписал это, используя load():

$('.classSelect').one('click', function() {
    var options = {
       type : 'post',
       dataType : 'text',
       data : {
         '_service' : myService,
         '_program' : myProgram ,
         'param' : myParams
       }           
    } // end options

    // load() will automatically load your .classSelect with the results
    $(this).load(myUrl, options);


    $(this).click(function() {
    // etc...

    }); // end click

}); // end one

Answer 2

Я полагаю, что это потому, что функция, присоединенная к событию успеха, не знает, что такое «это», поскольку она запускается независимо от объекта, в котором вы ее вызываете. (Я не очень хорошо объясняю это, но думаю, что это связано с замыканиями.)

Я думаю, если вы добавили следующую строку перед вызовом $ .ajax:

var _this = this;

и затем в функции успеха использовали эту переменную:

   success:
    function(request) {
     _this.html(request);   // populate select box
   }

вполне может сработать

Answer 3

Спасибо, Оуэн. Хотя может быть лучше написать код (с цепочкой) .... моя проблема с этим кодом была $ (this) не была доступна в вызовах .ajax и .bind .. так что сохраняя его в var и используя его Вар был решением.

Еще раз спасибо.

$('.classSelect').one("click",
 function() {
  var e = $(this) ;

  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(e).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(e).one("click",
   function() {
    $(e).next().val($(e).val());
  }); // End BIND
 }); // End One

Answer 4

Функция success () не знает об этом, как и любой другой обратный вызов события (они запускаются вне области объекта).

Вам необходимо закрыть переменную в области действия функции успеха, но на самом деле вам нужно не «это», а $ (this)

Итак:

var that = $(this);
... some code ...
success: function(request) {
  that.html(request)
}

Answer 5

Это соответствует одному выбору. Вам нужно сопоставить несколько элементов, чтобы вы хотели

$("select[class='classSelect']") ...