表中的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>

更新：

愈伤组织扩展

<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

Is不在表中工作，因为Knockout JS是在调用clock init以外的时间绑定(create)表的。您可以将安装延迟用于初始化，例如：

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

这是正常的方法，但是Knockout JS提供了自己的解决方案。这些有用的解决方案之一可以是可观察。