Передача данных о событии в функцию обратного вызова с помощью jQuery

Question

Мне трудно понять, как использовать event.data для возврата значения любого элемента, который вызвал событие.Вот мой пример:

<a href="#" class="dw_add">
  <img src="http://something" />
</a>

var callback = function(event){ console.log(event.data.src) }

$('.dw_add')
  .on('click', { src: $(this).find('img').attr('src') },callback);

$ это в настоящее время ссылается на документ, а не на тот, который был нажат.Надеюсь, вы понимаете, что я пытаюсь сделать, но мои знания javascript ограничены, думаю, я подхожу к этому с точки зрения PHP.

Любые идеи, как передать значение 'img src' вОбратный вызов

Answer 1

Вы не находитесь в области действия функций, поэтому:

$('.dw_add').on('click', { src: $(this).find('img').attr('src') },callback);

не будет работать, так как $ (это) не тот элемент, о котором вы думаете, потому что для выбранного элемента нет локальной области действия,no event.target или event.data и т. д.!

Однако это будет работать, так как имеет прямую ссылку на элемент и область видимости для «this»:

var callback = function(event){ console.log(event.data.src) }
var elm = $('.dw_add');
elm.on('click', { src: elm.find('img').attr('src') },callback);

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

function callback(a){ console.log(a) }

$('.dw_add').on('click', function() {
  var a = $(this).find('img').attr('src');
  callback(a);
});​

Кроме того, использование $ (this) внутри функции обратного вызова будет работать, как, опять же, внутри области функций и имеетссылка на целевой элемент.

Answer 2

Почему бы не сделать что-то вроде этого:

var callback = function(event){ console.log($(this).find('img').attr('src')) }

$('.dw_add')
    .on('click', callback);

Answer 3

В обработчиках событий jQuery this устанавливается для элемента DOM, который вызвал событие.Поскольку вы присоединяете обработчик события к элементу <a>, ссылка будет this.

Если вы хотите получить src из img, вам нужно найтиэлемент img в триггере a с использованием find() или children():

$('.dw_add').on('click', function(e) {
    $(this).children('img').attr('src');
});