挖空 js 复选框单击功能问题

Question

我正在为我的页面使用Knockout JS，其中我有三个复选框。我使用了复选框的单击事件并编写了一个将在单击复选框时触发的方法。它工作正常。

问题是，当加载 Page 时，该函数会自行调用。

这是 html

<div class="form-horizontal" id="ko-bind-element">
            <input type="hidden" id="serverJSON" value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" />
            <div data-bind="foreach: procedures">
                <div data-bind="template: { name: Mode(), data: $data }"></div>
            </div>
        </div>
<script type="text/html" id="procedure">
            <table class="table table-bordered" >
                <tr>
                    <td class="col-md-3"><span data-bind="text: Name"></span></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: AlreadyCompleted,click:$root.Test(UID,1)" /></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: NotApplicable,click:$root.Test(UID,2)" /></td>
                    <td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: CreateNew,click:$root.Test(UID,3)" /></td>

                </tr>
                <tr>
                    <td colspan="4" style="padding:0;">
                        <div data-bind="if: CreateNew">
                            <textarea style="margin-top:10px; margin-bottom:10px;" class="col-md-offset-3 col-md-8" data-bind=" value : Text"></textarea>
                            <div class="clearfix"></div>
                        </div>
                    </td>
                </tr>
            </table>
        </script>

现在您可以看到我已经使用了click事件和函数Test这是JS代码

viewModel = {
        MtocFormID: 0,
        procedures: ko.observableArray(),
        dateid:null
    };
    function createGuid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
    $(document).ready(function () {
        var data = JSON.parse($("#serverJSON").val());
        debugger;
        viewModel.MtocFormID = ko.observable(data.ID);
        // viewModel.dateid = ko.observable(data.ExpiryDate)
        viewModel.Test = function (uID, type) {
            var item= ko.utils.arrayFirst(viewModel.procedures(), function (item) {
                return item.UID === uID;
            });
            if (item != null) {
                if (type == 1) {
                    item.AlreadyCompleted(true);
                    item.NotApplicable(false);
                    item.CreateNew(false);
                }
               else if (type == 2) {
                   item.AlreadyCompleted(false);
                    item.NotApplicable(true);
                    item.CreateNew(false);
                }
               else if (type == 3) {
                   item.AlreadyCompleted(false);
                   item.NotApplicable(false);
                    item.CreateNew(true);
                }
            }
        };
        $(data.TemplateProcedure).each(function (index, element) {
            var mappedItem = {
                //    otherSafetyPro: ko.observableArray([]),
                UID:createGuid(),
                VId: ko.observable(element.VId),
                TemplateID: ko.observable(element.TemplateID),
                ProcedureTemplateID: ko.observable(element.ProcedureTemplateID),
                Name: ko.observable(element.Name),
                AlreadyCompleted: ko.observable(element.AlreadyCompleted),
                NotApplicable: ko.observable(element.NotApplicable),
                CreateNew: ko.observable(element.CreateNew),
                Text: ko.observable(element.Text),
                Mode: ko.observable("procedure")
            }
            viewModel.procedures.push(mappedItem);
        });
        ko.cleanNode(document.getElementById("ko-bind-element"));
        ko.applyBindings(viewModel, document.getElementById("ko-bind-element"));
        form08wizard.submitData(getSubmitData);
    });
    $(document).on("click", ".kout-create", null, function (ev) {
        addEmpty();
    });

现在的问题是Test方法在页面加载时被自己调用。它应该仅在复选框单击时触发。

Answer 1

这是因为您正在将参数传递给淘汰点击事件，实际上淘汰将在加载时调用该函数，因为您正在使用()来传递参数，因此正在调用您的函数。

解决方案 1：您可以将点击函数包装在 JS 函数中，例如：

data-bind="click: function(){ $root.Test(UID,1) }"

解决方案 2：您可以使用绑定上下文。

data-bind="click: $root.Test.bind(UID,1)"

Answer 2

由于你调用了函数，你将点击与函数的返回绑定，你必须这样写：click：(( => $root。Test(UID，1(

Answer 3

试试这个：

$('.checkbox').change(function(){
    if (this.checked === true) {
        addEmpty();
    }
});

此外，将class="checkbox"添加到复选框以启用 OnChangeHandler。