javascript - knockout : Unable to bind to a button's click event when using Bootstrap popover

Question

当用户单击按钮时，Knockout 执行 Javascript 时遇到问题。不幸的是，这是一个相当复杂的页面，我无法显示完整的内容，但希望下面的小片段就足够了。

我试图简化这一点，甚至不调用 data-bind 的 Knockout 绑定(bind)中的实际 View 模型，而只是简单地发出警报。

<div data-bind="foreach: MyComputedStuff()">
...
  <div class="popover-content">
    <button onclick="alert('bar')">
      This works!
    </button>
    <button data-bind="click: function(data, event){alert('foo')}">
      THIS DOES NOT WORK
    </button>
  </div>
...
</div>

我在这里做错了什么明显的事情吗？

为什么alert('foo')无法执行？

了解我们使用 Bootstrap 并且这个特定按钮位于 popover 内可能会有所帮助。分区。

编辑:

我在控制台中看不到任何内容，页面的 Javascript 的其余部分继续正常工作。我已经在 Chrome 和 IE9 中尝试过了。

我应该说我能够将同一 foreach 中另一个元素上的单击事件绑定(bind)到 View 模型中的函数。这是有效的，这就是我期望能够复制的。 (如果我用 alert('blah') 替换对函数的调用，那么我会在此处看到预期的警报。)那为什么不在我的按钮上呢？

<a rel="tooltip" 
  title="Favourite App"
  data-bind="click: function(data, event){$root.ToggleFavorite(data)}">

Answer 1

感谢 haim770、Alexander、UweB 和 mhu 的帮助。

有同事指出了Knockout没有绑定(bind)点击事件的原因:Bootstrap正在修改DOM。

通过使用Knockout context debugger Chrome 扩展中，我的同事指出，包含我的按钮的 div 元素不在我告诉 Knockout 将绑定(bind)应用到的区域内……Bootstrap 已将其移动。

我正在使用 popovers Bootstrap 的功能，我的按钮位于 Bootstrap 已从我正在 foreaching 的 div 中移出的 popover 内。