jQuery事件未绑定到剔除条件元素

Question

我有一个简单的loggedIn属性，它是一个作为布尔值的ko绑定，因此当一个人登录（检查带有异步xhr以确认服务器端的检查）时，应在标头中显示一个元素：

<!-- ko if: loggedIn -->
<div class="loggedin">
  <a class="logout">Log Out</a>
</div>
<!-- /ko -->

<!-- ko ifnot: loggedIn -->
<div class="loggedout">
  <a class="login">Log In</a>
  <a class="signup">Signup</a>
</div>
<!-- /ko -->

上面是从显示/隐藏角度进行的工作，即，如果loggedIn为true则显示“ Log Out链接。

我.on的问题是将jQuery绑定到元素，即使使用.on ：

$('.loggedin').on('click', '.logout', function () {
   // Never fires...
});

如果刷新页面，它将起作用，但是任何动态更改都使我无法绑定到click（或任何其他）事件。

更新：我创建了一个小提琴来显示问题

Answer 1

做到这一点的一种好方法是在您的vm中拥有一个可以完成工作的函数，而不是依赖于jquery事件。 然后将click事件绑定到您的函数。

<div class="loggedout" data-bind="click: someVMFunction">
<a class="login">Log In</a>
<a class="signup">Signup</a>
</div>

Answer 2

我发现的解决方案是使用ko的visible ：

<div class="loggedin" data-bind="visible: loggedIn()">
   <a class="logout">Log Out</a>
</div>

<div class="loggedout" data-bind="visible: !loggedIn()">
   <a class="login">Log In</a>
   <a class="signup">Signup</a>
</div>

这似乎完美地工作，允许jQuery毫无问题地绑定元素。