Button declared in a template, not firing click event

4 posts, 0 answers
  1. Jesse
    Jesse avatar
    14 posts
    Member since:
    Jul 2014

    Posted 25 Jul 2014 Link to this post

    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);
    }


  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Jul 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Jesse
    Jesse avatar
    14 posts
    Member since:
    Jul 2014

    Posted 29 Jul 2014 in reply to Petyo Link to this post

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

    Thanks.
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 31 Jul 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready