Как одной функцией добавить элемент в DOM и получить ссылку на его объект?

Question

[pashted]

Приветствую.
Допустим, у меня есть вот такие два блока: codepen.io/Pashted/pen/VKNAJq

Первый уже существует в документе и я без проблем вешаю на него какую-то функцию.
А второй создается скриптом. Но после его создания мне приходится отдельно выполнять поиск этого элемента, чтобы задать обработчик.

Есть ли какая-либо хитрая форма объявления переменной block2, чтобы такой фрагмент:

block2.hover(function() {
  $(this).toggleClass('ok');
});

давал эффект?

ps:
такой вариант работает, но мне не походит:

var block2 = function() {
  $('body').append('<div class="block" id="2">Test block</div>');
  return $('#2');
};

block2().hover(function() {
  $(this).toggleClass('ok');
})

Answer 1

[Дима Паутов]

var div = $('<div />', {
	'id': 'item',
  'class': 'item',
  'text': 'Текст'
}).appendTo('body');

console.log(div);

Comments

[pashted]

спасибо. то, что надо

[pashted]

если кому интересно. вот тут об этом изложено подробнее api.jquery.com/jQuery/#jQuery2

Answer 2

[ProjectSoft]

Раньше в jQuery этот метод назывался leave
https://jsfiddle.net/51ndpggt/
PS: И зачем искать созданный элемент, если можно добавить событие во время создания

$("body").append(
    $("<div></div>", {
        'id': 'item',
        'class': 'item',
        'text': 'Текст'
    }).hover(function(e){
          $(this).toogleClass("ok");
    });
);

Comments

[pashted]

под "искать" я имел ввиду "сохранять ссылку на объект в переменную", чтобы не искать его снова потом

[pashted]

кстати, в примере, где добавляется обработчик во время создания, $(this).toggleClass('ok') выдаёт ошибку.
зато работает: $(e.target).toggleClass('ok');