Question

我有这样的淘汰剧本。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>

    <script type="text/javascript">
        var a = function () {
            this.allowEditing = ko.observable(false);
            this.isReadOnly = ko.observable(false);
        };
        var b = function () {
            this.Term = ko.observable('').extend({ required: true });
        };

        $(function () {
            var masterVM = (function () {
                this.a = new a(),
                this.b = new b();
            })();

            ko.applyBindings(masterVM);
        });
    </script>
</head>

<body>
    <ul id='myTab' class='nav nav-tabs hidden-xs hidden-sm hide-tabsCon'>
        <li class='active'>
            <a href='#applicant' data-toggle='tab'><i class='fa fa-search'></i>Applicant</a>
        </li>
        <li><a href='#coverages' data-toggle='tab'><i class='fa fa-search'></i>Coverages</a></li>
    </ul>



    <div id="myTabContent" class="tab-content">


        <div id="coverages" class="tab-pane fade in  active">
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#collapsea46c9c59-7905-47df-a4bd-df2b366d1af0">Calculated Results</a>
                        </h4>
                    </div>
                    <div id="collapsea46c9c59-7905-47df-a4bd-df2b366d1af0" class="panel-collapse collapse in" data-bind="with: a" style="height: auto;">
                        <div class="panel-body">
                            <div class="row">

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <label>
                                                <input type="checkbox" data-bind="checked: allowEditing"> Odd Term
                                            </label>
                                        </div><span class="validationMessage" style="display: none;"></span>

                                        <label>Policy Expiration Date</label>
                                        <div class="input-group date">
                                            <input id="PolicyExpirationDate" data-bind="enable: allowEditing, value: PolicyExpirationDate" type="text" class="form-control" disabled="">
                                            <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                        </div><span class="validationMessage" style="display: none;"></span>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">Panel Footer</div>
                    </div>
                </div>
            </div>
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#collapse8e4d73d2-f1f4-4fa5-8b16-f34e6adbcbf0">Driver Assignments</a>
                        </h4>
                    </div>
                    <div id="collapse8e4d73d2-f1f4-4fa5-8b16-f34e6adbcbf0" class="panel-collapse collapse">
                        <div class="panel-body">
                        </div>
                        <div class="panel-footer">Panel Footer</div>
                    </div>
                </div>
            </div>
        </div>

        <div id="applicant" class="tab-pane fade  ">
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#collapse1a69710b-c5be-4762-bfb5-e46a76101c97">New Quote Information</a>
                        </h4>
                    </div>
                    <div id="collapse1a69710b-c5be-4762-bfb5-e46a76101c97" class="panel-collapse collapse" data-bind="with: b">
                        <div class="panel-body">
                            ..content
                        </div>
                        <div class="panel-footer">Panel Footer</div>
                    </div>
                </div>
            </div>
        </div>



    </div>


</body>
</html>

问题是，如果此代码位于我的标签结构的标签2中，则不会发生绑定。如果选项卡是dom加载的活动选项卡，一切正常。例如，您复制粘贴id = coverage并将其作为第一个选项卡内容，工作正常。在dom渲染时作为申请人的活动标签的默认设置然后单击标签2导致不发生绑定。

每个jquery选项卡的绑定敲除仅在加载时显示选项卡时才有效

0 个答案: