Cannot handle events from the content of a bootstrap popover

Question

I need to put some dynamical content in a bootstrap popover with multiple event handling on it but none of them are triggered. For example:

HTML:

<span id="popover" class="btn btn-default">
    Popover
    <div class="content hide">
        <form id="form">
            <input type="text" class="form-control"/> 
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <button id="cancel" type="button" class="btn btn-default">Cancel</button>
    </div>    
</span>

Javascript:

$('#popover').popover({
    html: true,
    placement: 'bottom',
    content: function () {
        return $(this).parent().find('.content').html();
    }
});
$('#popover').on('shown.bs.popover', function () {
    $('#form').submit(function (e) { // never called
        e.preventDefault();
        alert('Form submitted');
    });
    $('#cancel').click(function () { //never called
        $('#popover').popover('hide');
        alert('popover closed');
    });
});

JS Fiddle: http://jsfiddle.net/yddRB/

Answer 1

Try delegating an event of cancel and submit like following:

For Cancel

$(document.body).on('click',"#cancel",function () {
    $('#popover').popover('hide');
    alert('popover closed');
});

For Submit

$(document.body).on('submit','#form',function (e) {
     e.preventDefault();
     alert('Form submitted');
});

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Updated Fiddle