Как вызвать метод объекта, обрабатывающий ещё не существующий элемент?

Question

[Антон Покачалов]

Допустим мне нужно обработать элементы в контейнере fancybox (который появляется по клику на кнопку).
Например, покажем "имя" при наведении на элемент 'div' в появившемся fancybox.

не работает, как такая конструкция:

var obj = {
show: function() {
        $('body div').mouseover(function() {
                $('.name', $(this)).show();
        } );
    }
}
$(function( {
    obj.show();
});

так и такая:

var obj = {
show: function() {
        $('body').on('mouseover', 'div',
            function() {
                $('.name', $(this)).show();
            }
        );
    }
}
$(function(){
    obj.show();
});

Answer 1

[Евгений Петров]

Зачем вы отслеживаете событие в body? Раз уж используете всплытие, так делайте это правильно, а не наполовину.
И уж если обращаться к body, то вот так $(document.body).

var obj = {
	show: function () {
		$(document).on('mouseover', 'div', function () {
			//this — это div
			...
		});
	}
}
obj.show();

Comments

[Антон Покачалов]

Спасибо, добрый человек, все заработало! Почему же не работало с 'body'? Ведь 'document' по сути тоже самое, что body, только без html элемента.

[Антон Покачалов]

Хотя нет, "с тоже самое" я погорячился)

[Евгений Петров]

@nicenice на момент парсинга чего угодно в документе у вас этот самый document уже есть. Всегда. А body появится когда до него дело дойдёт.
Ну про 'body' я уже написал. Задумайтесь, насколько тяжелее искать элемент в дереве по имени тэга или перейти по уже готовой ссылке.

Answer 2

[Антон Покачалов]

Работает такая конструкция:

$(function(){
    $('body').on('mouseover', 'div',
            function() {
                $('.name', $(this)).show();
            }
        );
});

Но мне нужно вызвать её через метод объекта...

Answer 3

[Дмитрий Ермолаев]

ваше

$(function(){
    obj.show();
});

эквивалентно

$(function(){
  function() {
    $('body').on('mouseover', 'div',
      function() {
        $('.name', $(this)).show();
      }
    );
  }
});

попробуйте вместо

var obj = {
show: function() {
        $('body div').mouseover(function() {
                $('.name', $(this)).show();
        } );
    }
}

сделать так:

var obj = {
  show: $('body').on('mouseover', 'div',
    function() {
      $('.name', $(this)).show();
    }
  );
}

Comments

[Roman Zhak]

@iusfof последний кусок кода с синтаксической ошибкой. Кроме того, это не решает проблему автора вопроса, ибо в show сразу запишется результат вызова jQuery

[Евгений Петров]

Да и первые 2 куска кода вовсе не эквивалентны.

[Антон Покачалов]

так и есть

[Дмитрий Ермолаев]

@nicenice то есть?

[Антон Покачалов]

насколько я знаю, тело метода нужно оборачивать в function(){}, тем более у меня методов много

[Евгений Петров]

@iusfof вы задумайтесь — что хранится в obj.show из вашего последнего куска кода (подсказываю — document).
Как уже справедливо заметили @nicenice и @zhak55, метод должен содержать ссылку на функцию.