Применить событие на дочернем узле с 'this'

Question

У меня есть функция, которая динамически создает div-боксы и помещает на них событие. В поле я создаю a-узел и внутри него img-node. Когда я нажимаю на a-узел, событие должно срабатывать, а фоновое изображение должно быть изменено на другом div. Ниже вы можете увидеть мой код, и теперь он «this.src» указывает на узел a, который, конечно, не работает.

Есть ли способ указывать на дочерний элемент a-узла, т.е. img-узел на этой линии?

var box = $('<div/>', { 
    'class': 'imgDiv', 
    'width': maxWidth, 
    'height': maxHeight, 
}).appendTo('.windowContent'); 

var a = $('<a/>', { 
    'href': '#', 
}).appendTo(box) 

var img = $('<img/>', { 
    'src': 'pics/' + this.fileName, 
    'width': this.thumbWidth, 
    'height': this.thumbHeight, 
}).appendTo(a); 

$(a).click(function() { 
    $('#desktop').css("background-image", "url(" + this.src + ")"); 
}); 

Answer 1

this действительно указывает на якорь, которая была нажата внутри обработчика щелчка. Вы ничего не можете с этим поделать, но ваш обработчик кликов будет закрывать вашу переменную img.

Это то, что вы хотите?

$(a).click(function() { 
    $('#desktop').css("background-image", "url(" + img.attr("src") + ")"); 
}); 

EDIT

Как Феликс указывает, а есть уже объект JQuery, так что вы можете просто сделать:

a.click(function() { 
    $('#desktop').css("background-image", "url(" + img.attr("src") + ")"); 
}); 

Answer 2

Я думаю, вы могли бы сделать:

$(a).click(function() { 
    $('#desktop').css("background-image", "url(" + $(this).find("img").attr("src") + ")"); 
}); 

Answer 3

Да, вы можете сделать это:

a.click(function() { 
    var $imgSrc = $(this).find("img").attr("src"); 
    $('#desktop').css("background-image", "url(" + $imgSrc + ")"); 
});