Question

我无法通过简单的按钮点击在我的网站中触发logMyStuff淘汰赛功能。请注意，我添加了<button>，<a>和<div>以尝试使其正常工作。我做了一个js小提琴，但js小提琴奏效了。

这是我的代码：

var SearchFilterViewModel = (function () {
        function SearchFilterViewModel() {
            this.logMyStuff = function () {
                console.log("stuff");
            };
            this._categoryID = 1;
            this._categories = ko.observableArray([
                new Category("Vegan Meat", 1),
                new Category("Vegan Dairy", 2),
                new Category("Confectionary", 3),
                new Category("Baking", 4),
                new Category("Restaurants", 5),
                new Category("Fashion", 6)
            ]);
            this._regionGetter = new AreaGetter();
            this._townGetter = new AreaGetter();
            this._regionGetter.getAreas("2186224");
            this._regionGetter._selectedArea.subscribe(this._townGetter.getAreas.bind(this._townGetter));
        }
        return SearchFilterViewModel;
    })();

    $(document).ready(function () {
        var _searchFilterViewModel = new SearchFilterViewModel();
        var _searchFilterForm = $("#find-vegan-products-page").find("form")[0];
        ko.applyBindings(_searchFilterViewModel, _searchFilterForm);
    });

HTML：

<div id="find-vegan-products-page" class="full-size container-fluid" style="height:900px; padding: 70px 40px 40px 40px;">
            <!-- TODO: Make blackand white video section a bit shorter -->
                <h1 style="margin:0px 0px 20px 0px; color: dimgray;">FILTER YOUR SEARCH</h1>
                <button style="width:100px;height:100px;" data-bind="click: logMyStuff"></button>
                <a style="width:100px;height:100px;" data-bind="click: logMyStuff"></a>
                <div style="width:100px;height:100px;" data-bind="click: logMyStuff"></div>
                <form role="form">
                    <div class="row">
                        <?
                            echo RegionSelect::display();
                            echo TownSelect::display();
                            //echo CategorySelect::display();
                            ?>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="go-button" 
                                class="with-border clickable" 
                                href="#find-vegan-products-page" >
                                <h5  class=" text-center medium-text">GO</h5>
                            </div>
                        </div>
                    </div>
                </form>
        </div>

Answer 1

这是因为您在applyBinding()中定义的根节点是<form>，而您的<button>，<a>和<div>是调用logMyStuff()不在该格式之内。

请改为尝试：

var _searchFilterRoot = $("#find-vegan-products-page")[0];
ko.applyBindings(_searchFilterViewModel, _searchFilterRoot);

knockout js：data-bind点击不起作用

1 个答案: