This is a migrated thread and some comments may be shown as answers.

Button declared in a template, not firing click event

3 Answers 731 Views
Button
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Jesse asked on 25 Jul 2014, 02:14 PM
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);
}


3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 29 Jul 2014, 08:49 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jesse
Top achievements
Rank 1
answered on 29 Jul 2014, 01:59 PM
How should I fix this issue? Unfortunately, cannot take button out of the template.

Thanks.
0
Petyo
Telerik team
answered on 31 Jul 2014, 08:35 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Button
Asked by
Jesse
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Jesse
Top achievements
Rank 1
Share this question
or