I have created an application using Kendo UI that saves user inputs in a Javascript array and then displays these items by appending text to a div. In addition to the text, I want to include delete buttons to remove these items from the array.
After initializing Kendo UI, I add the delete buttons to the DOM. To ensure proper styling, I use the .kendoMobileButton()
method on each button added, even though they already have the attribute data-role="button"
.
However, when attempting to use these buttons with the data-click="deleteNumber"
function, it doesn't seem to work. The function does not get triggered. Any suggestions?
For reference, here is a simple example demonstrating the issue:
This is the code snippet:
<!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>