Что выбирается с помощью ‘this’ после .prependTo()?

#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» используется несколько раз и делает больше, чем просто добавляет это событие. Спасибо за подсказку с табличкой, я посмотрю на нее.