CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Antoine
Antoine

Reputation: 2807

Customize twitter bootstrap dropdown

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?

Upvotes: 0

Views: 1332

Answers (2)

DeeDub
DeeDub

Reputation: 1662

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

Upvotes: 1

Hampus Brynolf
Hampus Brynolf

Reputation: 1336

Use preventDefault to stop the checkbox from being checked.

​$("i")​​.click(function(e){
  e.preventDefault();
  // some code here - do your thing!
}​);​

See http://jsfiddle.net/PcjNz/

Of course, you should probably bind different click-events to the different icons. This example only prevents the checkbox from being checked...

Upvotes: 0

Related Questions