表格内的div标签

Question

当我点击不在表格中的<input type="text" class="form-control" value="13:14">时，它运作良好。

但是，当我点击表格中的<input type="text" class="form-control" value="13:25">时，它无效。为什么呢？

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>
<link href="~/assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/github.min.css">

<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script> @*it's not a function*@
<script type="text/javascript" src="assets/js/highlight.min.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>

<div class="input-group clockpicker" data-align="top" data-autoclose="true">
    <input type="text" class="form-control" value="13:14">
</div>

<table>
<thead>
    <tr><th>Name</th><th>time</th><th>Time input</th></tr>
</thead>
<tbody data-bind="foreach: items">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: time"></td>
        <td>
            <div class="input-group clockpicker" data-align="top" data-autoclose="true">
                <input type="text" class="form-control" value="13:25">
            </div>
        </td>
    </tr>
</tbody>
</table>

<script type="text/javascript">
$('.clockpicker').clockpicker();

function MyViewModel() {
    var self = this;
    self.items = ko.observableArray([{ name: 'jhon', time: '11:00' }, { name: 'David', time: '12:00' }]);
}
ko.applyBindings(new MyViewModel());
</script>

更新

Callendar扩张

<ul>
<li>
    <div class="input-group clockpicker" data-align="top" data-autoclose="true">
        <input type="text" class="form-control" value="13:14">
    </div>
</li>

Callendar不扩张

<ul data-bind="foreach: items">
<li>
    <div class="input-group clockpicker" data-align="top" data-autoclose="true">
        <input type="text" class="form-control" value="13:14">
    </div>
</li>

淘汰出局的问题？

Answer 1

是不是在表中工作，因为Knockout JS在其他时间绑定（创建）表而不是调用时钟init。您可以使用设置延迟进行初始化，如：

setTimeout(function() {
  $('.clockpicker').clockpicker();
}, 300);

这是正常的方法，但Knockout JS提供了自己的解决方案。 其中一个有用的解决方案可以是observable。