Making span clickable after prepend in jQuery

Question

I have a DIV where some code is presented. When I hover on this DIV I want to present a button that toggles the comments inside the code block. So far I have this:

$('.code-block').hover(
    function(){
        $(this).prepend('<span class="code-block-control">toggle comments</span>');
    },
    function(){
        $('.code-block-control',this).remove();
    }
);

$('.code-block-control').click( function(){ $('.comment').toggle(); } );

The span is presented when I hover over the code block. But when I click the span that is created nothing happens. Even if I change the click function to a simple alert nothing happens.

Anyone have any idea on how to fix this.

Answer 1

You must call the listener iterator again; the iterator only affects nodes already present at the time.

Answer 2

Use event delegation, jQuery offers live and delegate:

$('.code-block-control').live("click", function(){ $('.comment').toggle(); } );

Done.

Answer 3

Use live():

$('.code-block-control').live('click', function(){
  $('.comment').toggle();
});

Since span is dynamically generated, the click event won't work, you need live instead.

Live Description:

Attach a handler to the event for all elements which match the current selector, now or in the future.

Answer 4

If you user prependTo you can assign the handler to the generated span

$('<span class="code-block-control">toggle comments</span>').
  click( function(){ $('.comment').toggle(); } ).
    prependTo(this);

Answer 5

You should just have the span already in the HTML instead of inserting it with your script. Then set the .hover() event to remove the `display: none" style.

This way you don't have to worry about setting your event handler every time. Plus you know it is going to be inserted most of the time, so it's not really "dynamic" in terms of the user context, just in terms of the user's action, so doing "display: none" is more appropriate, I think.