Kendo UI Mobile-单击按钮时出现故障调用功能

Question

I've put together a little app using Kendo UI that stores user inputs in a Javascript array, and then prints these items out by adding text to a div. 我使用Kendo UI组合了一个小应用程序，该应用程序将用户输入存储在Javascript数组中，然后通过将文本添加到div中来打印出这些项目。 Along with the text, I need to have a delete button to remove these items from the array. 与文本一起，我需要有一个删除按钮才能从数组中删除这些项目。

Since I'm adding the delete buttons to the DOM after I initialize Kendo UI, I assume I need to use the .kendoMobileButton() method on each button I add. 由于我在初始化Kendo UI之后将删除按钮添加到DOM，因此我假设我需要在添加的每个按钮上使用.kendoMobileButton()方法。 If I don't do this, my buttons aren't styled correctly, despite being given the attribute data-role="button" . 如果我不这样做，尽管我的按钮被赋予了data-role="button"属性，但样式还是不正确。

Still, when I try to use these buttons, I can't get them to call a function with data-click="deleteNumber" . 不过，当我尝试使用这些按钮时，无法让它们使用data-click="deleteNumber"来调用函数。 The function simply doesn't seem to fire. 该功能似乎并没有触发。 Any hints? 有什么提示吗？

Here is a quick example I threw together that illustrates my problem: http://crocdoc.ifas.ufl.edu/files/kendo_example/ 这是我汇总的一个简单示例，它说明了我的问题： http : //crocdoc.ifas.ufl.edu/files/kendo_example/

It is pasted here for easy reference: 粘贴在此处以方便参考：

<!DOCTYPE HTML>
<html>
<head>
<title>Example code</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
</head>
<body>
<div data-role="view" id="main">
    <div data-role="header">
        <div data-role="navbar">Generate numbers</div>
    </div>  

    <a data-role="button" data-click="addNumber" style="display: block; margin: 10px; text-align: center;">Add number</a>
    <div id="number_list" style="padding: 0 20px 0 20px;"></div>

</div>


<script>
    var app = new kendo.mobile.Application();

    var number_container = [];

    var addNumber = function () {
        var current_number = Math.floor(Math.random() * 1000 + 1);
        number_container.push(current_number);
        console.log(number_container);

        var current_index = number_container.length - 1;

        $('#number_list').append('Number ' + current_index + ': ' + current_number + ' <a id="delete_' + current_index + '" data-role="button" data-click="deleteNumber">Delete</a><br >');
        $('#delete_'+current_index).kendoMobileButton();
    };

    var deleteNumber = function (e) {
        console.log('Delete button hit');
        var button_id = e.button.context.id;
        button_id = button_id.replace('delete_', '');
        button_id = parseFloat(button_id);

        number_container.splice(button_id, 1);

        $('#number_list').empty();
        for (var i = 0; i < number_container.length; i++) {
            $('#number_list').append('Number '+i+': '+number_container[i]+' <a id="delete_' + i + '" data-role="button" data-click="deleteNumber">Delete</a><br >');
        }

    }; 

</script>
</body>
</html>

Answer 1

You need to modify your code as following , 您需要按以下方式修改代码，

 $('#number_list').append('Number ' + current_index + ': ' + current_number + ' <a id="delete_' + current_index + '">Delete</a><br/>');
    $('#delete_'+current_index).kendoMobileButton({click: deleteNumber});

Thanks DJ 谢谢DJ

@debug_mode @调试模式

Kendo UI Mobile-单击按钮时出现故障调用功能

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-08-08 11:09:12

Kendo UI Mobile-单击按钮时出现故障调用功能

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-08-08 11:09:12

解决方案1
1 已采纳 2012-08-08 11:09:12