淘汰賽js：數據綁定點擊不起作用

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()定義的applyBinding()是<form> ，而調用logMyStuff()的<button> ， <a>和<div>不在該表單之外。

嘗試以下方法：

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