JSFiddle - React, Tailwind, and code Playground

by TiagoSalgado

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div class="details" data-bind="foreach: itemsPaged"> <a class="btnDetails" href="#" data-bind="text:display"></a>

    <div class="expand">test</div>
</div>
<div> <a href="#" data-bind="click: $root.changePage">Change Page</a>

</div>

JavaScript

$(document).on("click", "a.btnDetails", function () {
    alert("original msg");
});

function ViewModel() {
    var self = this;

    self.currentPage = ko.observable(1);

    self.changePage = function () {
        self.currentPage(self.currentPage() + 1);
    };

    self.items = ko.observableArray([{
        display: 'Cars',
        id: 1
    }, {
        display: 'Fruits',
        id: 2
    }, {
        display: 'Humans',
        id: 3
    }, {
        display: 'Software',
        id: 4
    }, {
        display: 'Movies',
        id: 5
    } ]);

    self.itemsPaged = ko.computed(function () {
        return self.items.slice(self.currentPage() - 1, self.currentPage());
    });
}

ko.applyBindings(new ViewModel());

$(document).on("click", "a.btnDetails", function () {
    alert("msg from override event");
});