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