Button declared in a template, not firing click event

[Jesse]

Hello,
I have a button (id = deleteButton) declared in a template as shown in code below. It doesn't invoke the function deleteProduct on click event. 

Thanks for your time and help.

<script id="template" type="text/x-kendo-template">
      <ul id="invitationsPanelBar">
        # for (var i = 0; i < data.length; i++) { #
            <li id="1">#= data[i].userName #<button style="position:absolute;right:30px; type="button" id="deleteButton" data-bind="click: deleteProduct"><span class="k-icon k-i-close"></span></button>

<ul>
                        # for (var j = 0; j < data[i].invitationsList.length; j++) { #
                            <li><span>
                                        <a href="resultsContainer.html">#= data[i].invitationsList[j].userStarName #</a>
                                        #if (data[i].invitationsList[j].status === "New") {#
                                            <span style="position:absolute;right:30px;color:\#85b2cb;">New</span>
                                        #}#
                                    </span>
                            </li>
                        #}#
                    </ul>
            </li>
        # } #
       </ul>


    </script>
 $(document).ready(function() {
    var viewModel = kendo.observable({

                        deleteProduct: function(e) {
                            console.log("deleteProduct");
                            var pbar = $("#invitationsPanelBar").data("kendoPanelBar");
                            pbar.remove($(e.currentTarget).closest("li"));
                           // pbar.remove("#1")
                        }


                    });
                    kendo.bind($("#deleteButton"), viewModel);
}

[Petyo]

Hello Jesse,

Using id attributes in repeating templates is not supported as it will result in an invalid HTML (multiple elements having the same ID). 

Apart from that, the sample you have posted tries to call kendo.bind to an element not yet present in the DOM. Perhaps this is not your real case, though. 

Regards,
Petyo
Telerik

 

 

[Jesse]

How should I fix this issue? Unfortunately, cannot take button out of the template.

Thanks.

[Petyo]

Hello Jesse,

Like I suggested in my previous reply, you should remove the ID attributes form the template. You may also move the event handler in the view model which is used to render the template, instead of using an additional view model.

Regards,
Petyo
Telerik