Twitter bootstrap 引导popover模板丢失敲除绑定

我正在尝试制作一个具有html表单和类型为“submit”的按钮的popover。此popover也绑定到knockout.js

当我点击popover上的按钮时，它不会触发KO函数，而是发出一个标准post请求

如果我把表格移到popover的外面，它就可以正常工作了

如何在弹出窗口中创建html表单并使用submit按钮触发模型的函数

这是一个

名称




创造

$（'createTaskPopover'）.popover({
容器：'主体'，
html:'真'，
内容：功能（）{
返回$（“#createTaskPopoverContent”）.html（）；
}
});
函数VM（）{
var self=这个；
self.AddTask=函数（formElement）{
console.log（formElement）；
}
}
var projectVM=new VM（）；
ko.应用绑定（projectVM）；

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

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

选项A：在弹出框显示后进行敲除绑定

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

选项B：内联HTML并简化为

$（“#createTaskPopover”）.popover（）

---

它不起作用的原因是您正在使用

.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
});

。但是请注意，当弹出窗口打开时，当它“取消隐藏”内容时，您会看到轻微的闪烁

这可以通过只将内部

表单

（或者如果需要，可以将其包装在另一个

div

中）传递到popover来进一步改进，然后您甚至不需要处理显示的事件，并且一旦popover显示，您就不会看到内容“出现”：

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

---

.

您可能会感兴趣，看看哪种方法有助于缩小引导和淘汰之间的差距。它有一个用于流行音乐的接口。我认为，应该有一种方法，不使用任何扩展。这不是我遇到过的罕见问题。哦，是的-这当然不是你问题的答案，但知道这些东西有时存在是很方便的：）看看你的具体问题，我认为这是因为你使用

.html（）

，动态返回弹出窗口的内容，因此，此时它将丢失

submit

绑定。我还没有一个解决方案，虽然…选项a可能不会在一个更大规模的击倒为基础的网站上工作-我怀疑OP将有其他事情正在推动击倒以外的这一流行音乐。选项B甚至会做任何剔除数据绑定吗？我怀疑它会有与当前代码完全相同的问题。选项A很难应用，原因正如James所说。备选方案B；这使得代码难以阅读，维护将成为一个问题。在实际场景中，我的原始HTML并不像这个例子中那样简单。是的，这只是为了说明这一点，而且也可以将vm和绑定分开。澄清了第二个选项。这就是我问题的答案。谢谢你的帮助+1也是为了您的进一步改进。非常感谢。@Just Another CodeLover没问题！

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