#jquery
#jquery
Вопрос:
У меня есть следующий код:
$('<div id="' id '"><a href="#" class="edit">Edit</a> | <a href="#" class="remove">Remove</a><br /><h1>' title '</h1><br /><p>' content '</p></div><hr>').prependTo('#content').hide().slideDown('normal');
addFunctionality(this);
function addFunctionality(scope){
//Remove-section
$('.remove', scope).click(function(e){
e.preventDefault(); ...
});
}
Не следует this
ссылаться на вставленные элементы DOM? Таким образом, ничего не произойдет, если я нажму на ссылку с классом remove
?
Ответ №1:
this
ссылается на объект, в контексте объекта которого была вызвана функция. Если вы используете приведенный выше код в своей готовой функции, this
это фактически весь HTML-документ. this
может использоваться в обратных вызовах событий jQuery (например, события click) для ссылки на объект DOM, который вызвал действие. this
никогда не изменяется в середине функции, независимо от того, какую функцию вы вызываете.
Чтобы получить то, что вы хотели, сохраните возвращенный объект jQuery в переменной и передайте его вашей функции:
var $elements = $('<div id="' id '"><a href="#" class="edit">Edit</a> | <a href="#"
class="remove">Remove</a><br /><h1>'
title '</h1><br /><p>' content '</p></div><hr>')
.prependTo('#content')
.hide().slideDown('normal');
addFunctionality($elements);
function addFunctionality(scope){
//Remvoe-section
$('.remove', scope).click(function(e){
e.preventDefault(); ...
});
}
Ответ №2:
Я не уверен, как это вписывается в ваш существующий код, но вы могли бы рассмотреть возможность объединения в цепочку .find()
для выбора a.remove
только что созданных вами элементов, таким образом:
$('<div id="' id '"><a href="#" class="edit">Edit</a> | <a href="#"
class="remove">Remove</a><br /><h1>'
title '</h1><br /><p>' content '</p></div><hr>')
.prependTo('#content')
.hide().slideDown('normal')
.find('a.remove').click(function(e){
e.preventDefault(); //...
});
Смотрите http://api.jquery.com/find /
Я бы также взглянул на http://api.jquery.com/jQuery.template / чтобы очистить создание этого запутанного элемента.
Комментарии:
1. .find() также работал бы, но был бы не очень удобен в моем коде, потому что функция «addFunctionality» используется несколько раз и делает больше, чем просто добавляет это событие. Спасибо за подсказку с табличкой, я посмотрю на нее.