Question

我试图制作一个带有html格式的popover和一个类型为＆＃34的按钮;提交＆＃34;。这个popover也绑定到knockout.js。

当我点击弹出窗口上的按钮时，它不会触发KO功能，而是发出标准的发布请求。

如果我将表单移到弹出窗口之外，它可以正常工作。

如何在弹出窗口中创建html表单并使用提交按钮触发我的模型的功能？

<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

它无法正常工作的原因是因为您通过.html()调用重复了html，此时敲除绑定会丢失。你实际上可以直接使用bootstrap元素，并结合显示的事件来移除hide类，它可以按你的意愿工作：

$('#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。但请注意，当弹出窗口打开时，您会看到轻微的闪烁，并且＆＃34;取消隐藏＆＃34;内容。

这可以通过仅传递内部form（或者你可以将它包装在另一个div中，如果你愿意的话）传递到popover，然后你甚至不需要处理所显示的事件，你不会看到内容＆＃34;出现＆＃34;一旦弹出窗口显示：

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

Further updated fiddle

Answer 2

未触发该函数的原因是因为popover使用的HTML是在运行时注入的，并且已经应用了Knockout绑定：

content: function () {
           return $("#createTaskPopoverContent").html();
         }

选项A：弹出窗口显示后执行Knockout绑定

$('#createTaskPopover').on('shown.bs.popover', function () {
  var projectVM = new VM();
  ko.applyBindings(projectVM);
})

选项B：内联HTML并简化为$('#createTaskPopover').popover()

data-content="raw HTML here" data-html="true"

Bootstrap popover模板失去了敲除绑定

2 个答案: