How to call an object method that processes an element that does not yet exist?

Question

JavaScript

Let's say I need to process elements in a fancybox container (which appears when a button is clicked).
For example, let's show "name" when hovering over a 'div' element in a fancybox that appears.

doesn't work like this construct:

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

like this:

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

Answer 1

Why are you tracking the event on body ? Since you are using the ascent, do it right, not half way.
And if you refer to body , then like this $(document.body) .

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

Answer 2

This build works:

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

But I need to call it through an object method...

Answer 3

your

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

equivalent to

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

try instead

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

do this way:

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