knockout js: data-bind click not working

Question

I cannot get a simple button click to fire a logMyStuff knockout function in my website. Notice i have added a <button> , <a> , and <div> to try and make it work. I have made a js fiddle of it but the js fiddle worked.

Here is my code:

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

That's because the root node you defined in your applyBinding() is the <form> , while your <button> , <a> and <div> that are calling logMyStuff() are outside of that form.

Try this instead:

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