jquery - 表格内的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>

日历不展开

<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 在其他时间绑定(bind)(创建)表而不是调用 clock init。您可以使用设置延迟进行初始化，例如:

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

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