Bootstrap popover template loses knockout bindings

Question

I'm trying to make a popover which has a html-form and a button with type "submit". This popover is also bound to knockout.js.

When I click the button on the popover, it does not trigger the KO function, instead it makes a standard post request.

If I move my form to outside of the popover, it works fine.

How can I create a html-form in a popover and trigger a function of my model with submit button?

Here is a non-working fiddle

<a href="#" id="createTaskPopover" data-toggle="popover" data-placement="right" title="Create Task">Click me!!!</a>

<div id="createTaskPopoverContent" class="hide">
    <form data-bind="submit: AddTask">
        <input type="hidden" id="FeatureId" name="FeatureId" value="" />
        <span>Name</span>
        <input type="text" id="Name" name="Name" style="width:100%;" /><br />

        <br />
        <button id="btnCreateNewTask" type="submit" class="btn btn-info">Create</button>
        <br />
    </form>
</div>

$('#createTaskPopover').popover({
        container: 'body',
        html: 'true',
        content: function () {
            return $("#createTaskPopoverContent").html();
        }
    });

function VM() {
    var self = this;
    self.AddTask = function (formElement) {
        console.log(formElement);
    }
}
var projectVM = new VM();
ko.applyBindings(projectVM);

Answer 1

The reason it's not working is because you're duplicating the html with the .html() call, at which point the knockout bindings are lost. You can actually give bootstrap the element to use directly, and coupled with the shown event to remove the hide class, it works as you want it to:

$('#createTaskPopover').popover({
    container: 'body',
    html: 'true',
    content: $("#createTaskPopoverContent") //return element directly
}).on('shown.bs.popover', function() {
    $('#createTaskPopoverContent').removeClass('hide'); //remove hide when popover shown
});

Here's an updated fiddle. Note however that you see a slight flicker when the popover opens while it "unhides" the content.

This can be further improved by passing just the inner form (or you could wrap it in another div if you want) to the popover, and then you don't even need to handle the shown event, and you don't see the content "appearing" once the popover has shown:

$('#createTaskPopover').popover({
    container: 'body',
    html: 'true',
    content: $("#createTaskPopoverContent > form") //select the form directly
});

Further updated fiddle.