New to Kendo UI for jQuery? Download free 30-day trial

Click Binding

The Kendo UI Click (click) binding attaches a method of the View-Model to the click DOM event of the target element.

The methods is invoked when the user clicks the target DOM element.

Getting Started

The following example demonstrates how to use the click binding.

<div id="view">
<span data-bind="click: showDescription">Show description</span>
<span data-bind="visible: isDescriptionShown, text: description"></span>

<script>
var viewModel = kendo.observable({
    description: "Description",
    isDescriptionShown: false,
    showDescription: function(e) {
        // show the span by setting isDescriptionShown to true
        this.set("isDescriptionShown", true);
    }
});

kendo.bind($("#view"), viewModel);
</script>
 </div>

Binding to Events

The click binding is a shorthand for the events binding. The code snippets from the following example are equivalent.

<span data-bind="click: clickHandler"></span>

<span data-bind="events: { click: clickHandler }"></span>

Accessing DOM Event Arguments

The Kendo UI MVVM pattern supplies the DOM event argument wrapped in a jQuery Event object.

Preventing DOM Event Bubbling

To stop the event from bubbling up the DOM tree, use the stopPropagation method.

<span data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        e.stopPropagation();
    }
});

kendo.bind($("span"), viewModel);
</script>

Preventing Default Actions of DOM Events

For some DOM elements, the click event has a default action—for example, navigate to another page or submit a form. To prevent the default action, use the preventDefault method.

<a href="http://example.com" data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        // stop the browser from navigating to http://example.com
        e.preventDefault();
    }
});

kendo.bind($("a"), viewModel);
</script>

See Also

In this article