Template, JQuery, and Bind event handler going away.

[Scott]

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

[Alexander Valchev]

Hi Scott,

The template is re-rendered every time when you add a new item to the list view as a result the event handlers are unbind. As a solution I would recommend the following change:

//instead of
$(id).bind('click', onDelete);
//to use
$("#assignView").on('click', ".selection label[id]", onDelete);

Thus way the event handler will be attached to all elements which match the selector, now and in the future (e.g. after the template is re-rendered).
For convenience I have updated the fiddle - http://jsfiddle.net/valchev/JFTbk/3/ 

Regards,
Alexander Valchev
the Telerik team

[Scott]

Alexander:

thanks for the quick reply.  that is the fix I need.

thanks
Scott