Question

I have a simple function:

$(".slider").click(function () {

    $(this).after('<span class="slider">click me again</span>');

 });

//before first click   
<span class="slider">first click</span>

//after first click
<span class="slider">first click</span>
<span class="slider">click me again</span>

When I click on “click me again”, function does not fire.

I tried, live and on and a few other ways, but to no avail.

What am I doing wrong?

Answer 1

Use .live(), .delegate() or .on() (jQuery 1.7) to bind the event:

$(document).on("click", ".slider", function () {
    ...

.click( ... ) is short for .bind('click', ...), which only binds the event to the elements which exist at that time. Elements which are added later do not receive this event listener.