Kendo UI Mobile - 在按钮点击时调用函数的问题

我已经将使用Kendo UI的小应用程序放在一个Javascript数组中，将用户输入存储起来，然后通过将文本添加到div来打印这些项目。随着文本，我需要有一个删除按钮来从数组中删除这些项目。Kendo UI Mobile - 在按钮点击时调用函数的问题

由于我在初始化Kendo UI后向DOM添加删除按钮，我假设我需要在每个添加的按钮上使用.kendoMobileButton()方法。如果我不这样做，尽管被赋予属性data-role="button"，但我的按钮的样式不正确。

不过，当我尝试使用这些按钮时，我无法让他们调用data-click="deleteNumber"的函数。该功能似乎不会触发。任何提示？

下面是一个简单的例子我扔在一起，说明我的问题：http://crocdoc.ifas.ufl.edu/files/kendo_example/

它粘贴在这里，以供参考：

<!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>

来源

2012-08-07 petroica

您需要修改的代码如下，

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

谢谢 DJ

@debug_mode

来源

2012-08-08 11:09:12 debugmode

宾果。就是这样。谢谢！ – petroica 2012-08-08 13:49:29

Kendo UI Mobile - 在按钮点击时调用函数的问题

回答

相关问题