SantyEssac SantyEssac - 4 months ago 68
jQuery Question

Kendo Template check box not firing click event

I have used Kendo Template as follows:

<script type="text/javascript" src="@Url.Content("~/Scripts/Module/Analysis/CreateMaintainAnalysis.js")"></script>
<script type="text/x-kendo-template" id="Modeltemplate">
<div class="section group fr">
<div class="col span_2_of_12">
#if(ACTIVE_MODELS_COUNT > 0){# <input class="ModelCheckBox" type="checkbox" checked/>#} else {# <input class="ModelCheckBox" type="checkbox" unchecked/> #}#
</div>
<div class="col span_4_of_12"><label>#:MODEL#</label></div>
</div>
</script>


and I want to write click event on CheckBox Click as follows:

$("#ModelListView").kendoListView({
template: kendo.template($("#Modeltemplate").html())
});

$(".ModelCheckBox").click(function () {
if (this.checked) { alert("Checked"); }
});

Answer

Most probably, the click handler is attached too early, before the ListView is data bound, so there are still no checkboxes rendered. You have two options -

  1. Execute the code below in the dataBound event of the ListView.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/listview#events-dataBound

    $(".ModelCheckBox").click(function () {
       if (this.checked) { alert("Checked"); }
    });
    
  2. Use a delegate that is attached to the ListView <div>

    $("#ModelListView").on("click", ".ModelCheckBox", function () {
       if (this.checked) { alert("Checked"); }
    });