Jean DuPont
Jean DuPont

Reputation: 451

Bootstrap popover problems

I placed custom html with some inputs in bootstrap popover. Now I want to bind these inputs using JavaScript, but I can't do it...

So, here is a simple example that can explain more clearly my problem: http://jsfiddle.net/53pD6/16/

<button class="btn btn-small btn-popover" type="button" data-original-title="Popover" data-placement="bottom">*</button>

<!-- Popover html boby (Display attribute is none!) -->
<div id="popover_content_wrapper" style="display: none">
    <input type="checkbox" class="chbox"/>Click me (no effect)
</div>

<input type="checkbox" class="chbox"/>Click me (here it's Ok)

And JS:

$(function(){
    $('.btn-popover').popover({ 
        html : true, 
        content: function() {
            return $('#popover_content_wrapper').html();
        }
    });

    $(".chbox").change(function(){
        alert(1);
    });
});

I just want to bind checkbox in popover to function. How can I do it?

Upvotes: 1

Views: 910

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362320

Since the .popover() doesn't provide a way to attach event handlers, the only way I know to resolve this is with:

 $('body').on('click', '.chbox', function () {
     alert(1);
 });

http://jsfiddle.net/53pD6/17/


Update - Bootstrap popovers now have events

Upvotes: 2

Related Questions