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.

html

<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.

html

<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.

html

<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.

html

<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

• MVVM Overview
• Overview of the Attribute Binding
• Overview of the Checked Binding
• Overview of the CSS Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the Events Binding
• Overview of the HTML Binding
• Overview of the Invisible Binding
• Overview of the Source Binding
• Overview of the Style Binding
• Overview of the Text Binding
• Overview of the Value Binding
• Overview of the Visible Binding