I have an issue with binding the click event to a label in a template.
I’ve posted issue on JSFiddle: http://jsfiddle.net/scornell10/JFTbk/
When you select an item in the DataGrid, it is moved to the ListView.
The ListView uses a template that has a label (with the value of X) that I bind the click event too.
The bind works for 1st or the last selection.
If I select multiple, only the last item in the listView has the click event bind to it. All the others go away.
I’ve used Chrome dev tools and I can see the click event disappear when I add another item.
I can get a workaround by changing the template to:
<label>${Name}</label><label id="${ID}" onClick="onDelete(this);">X</label>
I’d rather bind dynamically as each item is selected.
Any thoughts on why it seems to remove the click handler?
Thanks
<!-- View --><div id="view"> <!-- The value of the INPUT element is bound to the "firstName" field of the View-Model. When the value changes so will the "firstName" field and vice versa. --> <label>First Name:<input data-bind="value: firstName" /></label> <!-- The value of the INPUT element is bound to the "lastName" field of the View-Model. When the value changes so will the "lastName" field and vice versa. --> <label>Last Name:<input data-bind="value: lastName" /></label> <!-- The click event of the BUTTON element is bound to the "displayGreeting" method of the View-Model. When the user clicks the button the "displayGreeting" method will be invoked. --> <button data-bind="click: displayGreeting">Display Greeting</button> </div> <script> // View-Model var viewModel = { firstName: "John", lastName: "Doe", displayGreeting: function() { // Get the current values of "firstName" and "lastName" var firstName = this.get("firstName"); var lastName = this.get("lastName"); alert("Hello, " + firstName + " " + lastName + "!!!"); } }; // Bind the View to the View-Model kendo.bind($("#view"), viewModel); </script>// Get the current values of "firstName" and "lastName" var firstName = this.get("firstName"); var lastName = this.get("lastName"); alert("Hello, " + firstName + " " + lastName + "!!!");alert("Hello, " + this.firstName + " " + this.lastName + "!!!");this.firstName = '';this.set("firstName", '');