Question

Here is my HTML code:

<div id="playlist_item">
    <ul class="link" id="link">
        <div class="style"><input type="checkbox" class="styled">
            <div id="style"></div>   
        </div>
        <li class="edit">http://carouselinfo.com/canal/</li>
        <span class="main edit">123</span>
    </ul>
</div>

When I prepend ie add the ul element then my other jquery event for this element not working

Jquery code:

$(function() {    
    $(".new").click(function(){
    $("#playlist_item").prepend("<ul class='link' id='link'><div class='style'><input type='checkbox' class='styled'><div id='style'></div></div><li class='edit'>Please edit this file</li><span class='main edit'>Write Duration</span></ul>")
});

This code is not working for prepend elements

$('.edit').editable();

$('input:checkbox').click(function () {
    var check_all = $("input[type='checkbox']");
    if ($(this).closest("ul").hasClass("change_link")) {
        $(this).closest("ul").removeClass("change_link");
    } else {
        $(this).closest("ul").addClass("change_link");
        $(".option").html("<div id='icons'><div class='add'></div></div><div id='icons'><div class='delete'></div></div>");
    }

    if (check_all.length == $("input[type='checkbox']").not(":checked").length) {
        $(".option").html("");
    }
});

Where I am wrong? Please help me out..

Answer 1

Replace $('input:checkbox').click(function() { with the following code:

$('#playlist_item').on('click', 'input:checkbox', function() {

When binding the event to $('input:checkbox') it will only be bound to matching element that exist at the moment where you perform the binding. By using the delegate syntax you bind the event to a parent element and thus receive the events from all child elements, even if they did not exist when calling the .on() function.

Since you also want to call .editable() on the new elements, do the following after adding a new one:

$('.edit:not(.editable-done)').addClass('editable-done').editable();

This will ensure .editable() is only called once per element. In case it is a jQuery UI widget you can simply keep $('.edit').editable() though – they detect automatically if the widget has already been created or not.