не удалось получить $ (this) .attr ('name') в jquery

Question

Я работаю над событиями и использую технику связывания следующим образом

$(".floor").bind('click.index',
{page:'floor.php',get:'floor='+$(this).attr('name')},loadContent);

Итак, я делаю вот что: я пытаюсь прикрепить событие click к классу .floor, а затем к функцииloadContent, я делаю ajax-запрос в соответствии с переменными e.data.page и e.data.get.

Но когда я на самом деле его выполняю, URL выглядит следующим образом: floor.php? Floor = undefined

Пожалуйста, помогите мне выйти из этой проблемы

Answer 1

Когда вы передаете данные в свою функцию-обработчик, вы должны заметить, что $(this) не ссылается на объект jQuery в этом контексте. Другими словами, $(this) относится к window объекту (или любому другому объекту, кроме объекта jQuery, в зависимости от контекста), заключенному в jQuery. Таким образом, вы должны использовать $(this) внутри вашей функции обратного вызова.

$(".floor").bind('click.index', {page:'floor.php'}, function(e){
   var name = $(this).attr('name');
});

Answer 2

Будьте осторожны при использовании this, всегда продумывайте, к чему оно относится.

$(".floor").bind(
    'click.index',
    {
         page: 'floor.php',
         get: 'floor=' + $(this).attr('name')
    },
    loadContent
);

В этом фрагменте кода this не будет ссылаться на то, к чему, по вашему мнению, оно будет относиться (.floor объект jQuery). Невозможно сказать, к чему это относится сейчас, зависит от вашего кода вокруг этого фрагмента. Вы можете прочитать о this, например, в Quirksmode .

Вам придется позаботиться о присвоении значения name внутри вашего обработчика событий, где this относится к .floor.

function loadContent (e) {
    ...
    var getFull = e.data.get + $(this).attr('name')
    ...
}

Чтобы это работало, вам нужно только изменить способ передачи вашего get:

{
     page: 'floor.php',
     get: 'floor='
},

jsFiddle Demo

Answer 3

Проблема в том, что $(this) выполняется , когда функция связана , а не когда вызывается обработчик (loadContent).Когда он ограничен, this, скорее всего, относится к объекту окна.У вас нет доступа к цели события во время привязки.

Я бы, вероятно, реструктурировал ваш код, чтобы не передавать пользовательские данные события, и вместо этого изменил бы функцию loadContent, чтобы она выглядела как

function loadContent(e) {
    var $target = $(e.target),
        data;
    if($target.hasClass('floor')) {
        data = {page: ...};
    } else {
        data = ...;
    }
    ... ajax shenanigans 
}