Question

I try to use the twitter boostrap dropdown plugin to make an editable dropdown.
For now I have this: http://jsfiddle.net/U9L2J/3/

What I want to do is put a pencil icon and a delete icon at the right of each element of the list (with <i class="icon-pencil"></i> and <i class="icon-remove"></i>). And trigger an event when these icons are clicked.
So when these icons are clicked, it shouldn’t check the checkbox of the element.
All the things I’ve tried just destroyed completely the CSS of the list…

Any ideas?

Answer 1

For those to handle a click event, you should map them up using .on():

    $(".icon-remove").on("click", function(e){
    alert('clicked');
    e.preventDefault();
});

Your Updated Fiddle

EDIT:
Code Correction:

    $("#layers-dropdown >.layers").on("click","li a label i.icon-remove", function(e){
        alert('clicked');
    e.preventDefault();
});​

Updated Fiddle with dynamic functionality