javascript - 自定义编辑弹出模板中的 Kendo Scheduler 附加按钮

Question

我有一个简单的 Kendo Scheduler 演示:http://dojo.telerik.com/IqIYI/7

在此演示中，我定义了一个自定义编辑模板，如下所示:

<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
   <p>
       <label>End: <input data-role="datetimepicker" name="end" /></label>
   </p>
</script>

默认情况下，此模板在创建新模式下有 2 个按钮，在编辑模式下有 3 个按钮。

我现在尝试向编辑弹出窗口添加第四个按钮，然后捕获其点击事件并执行其他操作(创建一个新的弹出窗口，其中填充了该事件之一 - “编辑为新”的功能)。

在编辑实际事件时，我通过剑道的编辑事件添加此按钮(每当弹出模板加载时都会触发)。

  edit: function(e) {
            if (!e.event.isNew()) {
                $(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
          }
  },

该按钮有一个 id="editasnew"，然后是一个点击事件捕获器:

  $('#editasnew').click(function(){
    console.log("edit now");
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.cancelEvent();

    setTimeout(function(){
      console.log("add new event now");
      scheduler.addEvent({ title: "(No title)" });
    }, 2000);
  });

但是!点击事件永远不会被触发。

所以我想知道，有没有办法以不同的方式添加按钮？ (通过剑道函数的参数 - 我在文档中没有找到)

..或者也许重构点击事件捕获器(也许点击这个按钮有剑道给出的一些停止传播功能)？

感谢任何帮助!

Answer 1

答案:

需要专门添加点击事件(我不知道为什么)，但这有效:

1. 将点击处理程序封装在函数内

_

function addClickEvent(){
    $('#editasnew').click(function(){
      console.log("edit now");
      var scheduler = $("#scheduler").data("kendoScheduler");
      scheduler.cancelEvent();

      setTimeout(function(){
        console.log("add new event now");
        scheduler.addEvent({ title: "(No title)" });
      }, 2000);

    });
  }

在调度程序的编辑事件中执行上述函数

_

  edit: function(e) {
            if (!e.event.isNew()) {
                $(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
          addClickEvent();
          }
  },

对于任何对此感兴趣的人来说，这是我更新的示例:

http://dojo.telerik.com/IqIYI/21