Javascript 剑道UI手机-点击按钮调用功能时出现故障
我用剑道UI组装了一个小应用程序,它将用户输入存储在Javascript数组中,然后通过向div添加文本将这些项目打印出来。除了文本,我还需要一个删除按钮来从数组中删除这些项目 由于我在初始化剑道UI后将删除按钮添加到DOM中,因此我假设我需要对添加的每个按钮使用Javascript 剑道UI手机-点击按钮调用功能时出现故障,javascript,function,button,kendo-ui,Javascript,Function,Button,Kendo Ui,我用剑道UI组装了一个小应用程序,它将用户输入存储在Javascript数组中,然后通过向div添加文本将这些项目打印出来。除了文本,我还需要一个删除按钮来从数组中删除这些项目 由于我在初始化剑道UI后将删除按钮添加到DOM中,因此我假设我需要对添加的每个按钮使用.kendoMobileButton()方法。如果我不这样做,我的按钮样式就不正确,尽管被赋予了属性data role=“button” 但是,当我尝试使用这些按钮时,我无法让它们调用带有data click=“deleteNumber
.kendoMobileButton()
方法。如果我不这样做,我的按钮样式就不正确,尽管被赋予了属性data role=“button”
但是,当我尝试使用这些按钮时,我无法让它们调用带有data click=“deleteNumber”
的函数。该函数似乎根本无法启动。有什么提示吗
下面是一个简单的例子,说明了我的问题:
粘贴在此处以便于参考:
<!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>
示例代码
生成数字
加号
var app=new kendo.mobile.Application();
变量编号_容器=[];
var addNumber=函数(){
var current_number=数学地板(数学随机()*1000+1);
编号\u容器。推送(当前\u编号);
控制台日志(容器编号);
var current_index=数量_容器长度-1;
$('number'u list')。追加('number'+当前索引+':'+当前编号+'删除
');
$('#删除'+当前索引).kendoMobileButton();
};
var deleteNumber=函数(e){
log('Delete button hit');
var button_id=e.button.context.id;
按钮id=按钮id.replace('delete_','');
按钮id=parseFloat(按钮id);
接头容器编号(按钮id,1);
$(“#数字列表”).empty();
对于(变量i=0;i');
}
};
您需要修改代码,如下所示:
$('#number_list').append('Number ' + current_index + ': ' + current_number + ' <a id="delete_' + current_index + '">Delete</a><br/>');
$('#delete_'+current_index).kendoMobileButton({click: deleteNumber});
$('number_list')。追加('number'+当前索引+':'+当前编号+”宾果。就是这样。谢谢!