Question

我为Kendo网格的“添加新记录”按钮添加了自定义点击处理程序，但JavaScript的preventDefault（）函数似乎无法正常工作。

$('.k-header').on('click', '.k-grid-add', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do something else
});

我希望“添加新记录”按钮不会在网格中添加新行。

完整代码示例：JSFIDDLE

Answer 1

这有效

$('.k-grid-add').click(function(e) {
    // do something else
    return false;
});

Answer 2

查看更新的小提琴

http://jsfiddle.net/qoxvaayn/5/

KendoUi还附加了点击事件监听器，如jquery，因此要删除现有的点击事件处理程序，我们应该使用off，如下所示，然后添加新的点击事件。

e.preventDefault（）; e.stopPropagation（）;将停止默认事件处理程序行为，但不会附加侦听器。

$('.k-header').off('click').on('click', '.k-grid-add', function(e) {
    //handler business logic here
});

Answer 3

（替代）

添加模板并创建自定义工具栏按钮＆＃34;添加新记录＆＃34;并附上了一个关于那个buuton的事件

像这样的事情

 <script type="text/x-kendo-template" id="template">
       <input type="button" value="Add new record" onClick="YOURFUNCTION()" class="k-button"/>
 </script>

<script>
$("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: [{text: "", template: kendo.template($("#template").html())}],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });
});

</script>

preventDefault（）在Kendo网格的自定义点击处理程序中不起作用

3 个答案: