How do I get jquery to recognize created on the fly element with .on?

Question

I have the following code I am using to begin an animation process:

$('body').on('click','#contain span', function(){
            var $target = $(this).parent().children('#contain_inner');
            flyout.fadeOldBox($target);
            flyout.createBox();
})

flyout.createbox() then creates a new instance of #contain_inner but that new instance is not available when my click function above tries to target it again. I know that if I were to use .live things would work but that is deprecated now and I don't really understand how I would use .on to accomplish what I need here.

I know I am using .on above already for the click, but I still don't understand how to bind it to the new #contain_inner div that will be create in flyout.createBox() .

EDIT: showing flyout.createBox() code...all is working now!

createBox: function(){
            $box = $('<div id="feed_contain_inner"></div>'); //was accidentally creating that as div class= instead of the id
            $box.load('example')
            $box.appendTo('#contain');
            flyout.positionBox($box);

    }

Answer 1

这与现场直播相同：

$(document).on('click', '.yourslector', callback);

Answer 2

Are you setting your .on() inside $(document).ready() ? It will only trigger on new elements if it's set outside $(document).ready() .