模板内的按钮从不调用处理程序答案

【问题标题】：Button Inside Template never call handler模板内的按钮从不调用处理程序
【发布时间】：2017-01-20 10:25:17
【问题描述】：

我的模板中的按钮客户端单击事件 (btnDelete) 将不起作用。这是因为 dropDown (dropDown) 的“selected”事件“覆盖”了它。

我能做什么，我的按钮 (btnDelete) 调用它的事件处理程序？

我有一个下拉列表：

@(Html.Kendo().DropDownList()
      .Name("dropDown")
      .DataTextField("Name")
      .DataValueField("Id")
      .Value(Model.SelectedView.Id.ToString())
      .TemplateId("dropDownGridViewsItemTemplate")
      .ValueTemplateId("dropDownGridViewsValueTemplate")
      .FooterTemplateId("dropDownGridViewsFooterTemplate")
      .Events(r=>r.Select("selectedEvent"))
      .DataSource(source =>
                  {
                      source.Read(read =>
                                  {
                                      read.Action("GetAvailableViews", Model.GridDataSourceControllerName);
                                  });
                  }))

Javascript Selected Handler（用于测试）

selectedEvent =function(e) {
    e.preventDefault();
}

eventNeverGetCalled = function (e) {
    e.preventDefault();
    alert("Why this event never get called?");
};

模板：

 <span class="viewTrash">
            @(Html.Kendo().Button()
            .Name("btnDelete")
            .HtmlAttributes(new
            {
                dataId = "#: data.Id #"
            })
            .Events(r => r.Click("eventNeverGetCalled"))
            .Content(Html.FontIcon("trash")).ToClientTemplate()
            )
        </span>

图片：

【问题讨论】：

标签： javascript jquery asp.net-mvc html kendo-ui

【解决方案1】：

以下示例有效，与您的实现进行比较：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
  </head>
  <body>

    <input id="dropdownlist" />
    
    <p id="log" style="margin-top: 5em;"></p>
    
    <script id="template" type="text/x-kendo-template">
  		<span>
    		#: name # <span class="k-icon k-i-delete my-delete"></span>
      </span>
    </script>
    
    <script>
      $("#dropdownlist").kendoDropDownList({
        dataSource: [
          { id: 1, name: "Apples" },
          { id: 2, name: "Oranges" }
        ],
        dataTextField: "name",
        dataValueField: "id",
        template: kendo.template($("#template").html()),
        dataBound: function(e) {
          e.sender.list.find(".my-delete").click(function(j){
            j.stopPropagation();
            j.preventDefault();
            $("#log").append("click called<br/ >");
          });
        }
      });
    </script>
    
  </body>
</html>

【讨论】：