Having Difficulty Triggering a Function On Button Click in Kendo UI Mobile

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>

Answer №1

You must make changes to your code as shown below:

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

Appreciate it! DJ

@debug_mode

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to update array with HTTP Put request: No document was found that matches the criteria. The method 'send' is not available

I'm facing some challenges when trying to execute HTTP Put requests within an array using AngularJS and ExpressJS. The problem arises when I make the first HTTP Put call, everything works fine. However, on subsequent attempts, it fails to work. Below ...

Encountering an Error while Setting Up NextJS on Vercel

Hello, I'm a newcomer to the world of web development. My current goal is to deploy my first NextJS app on Vercel, but I keep encountering an error. Error: SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse (<anonymous>) ...

Specify the minimum required spacing between two meshes in THREE.JS

I'm working on a code that generates clouds with random positions, rotations, and scales. However, sometimes these clouds can end up clipping together when they are generated close to each other or near another object. I want to set a minimum distance ...

Difficulty in toggling on and off several form elements with JavaScript

Trying to control multiple form elements on an HTML page with JavaScript has presented a challenge for me. In my form, each row contains a checkbox that should enable/disable the elements on that row. The issue I'm facing is that only the first two f ...

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

Can the concept of partial class be used in an AngularJS controller?

Is it possible to organize code into groups using partials in angularjs? The issue is that my controller has become too cluttered with a lot of code for different methods and functionalities, making it difficult to read. I want to maintain the same contro ...

Combining Django with the powerful Vue3 and lightning fast Vite

I'm in the process of upgrading my multipage app from Vue2 with webpack to Vue3 with Vite. After successfully rendering my Vue3 components on my Django templates, I am now facing a challenge - setting component variables on the Vue app using the Djan ...

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

Why is it that using "return false" does not stop the page from reloading when clicked?

I've attempted using this code, but it doesn't seem to prevent the page from reloading when the onclick function is triggered. What am I missing here? Could this be a problem related to browser compatibility? function track_specs() { $('b ...

"Enhancing Your Tables: A Guide to Implementing Filters in jQuery.fancyTable or Similar Tools

Currently, I am utilizing the fancyTable plugin to showcase a table of Django results. I have successfully integrated a search bar and sortable columns (ascending/descending). Filters are also incorporated, but at present, they only update the search bar w ...

Resize an image to fit perfectly within a material-ui grid

Is there a way to resize images within a grid layout without them getting cropped? Each image I try to fit into the top horizontal grid behaves differently due to varying dimensions. Instead of stretching and fitting into the container, the images end up b ...

Multiple Class Changing Effects: Hover, Fade, Toggle

I have a simple yet complex problem that I am trying to solve. I want to create links that fade in upon mouseover and fade out when the mouse moves away. Simultaneously, I want an image to slide in from the left while hovering over the links. I have manage ...

Using Angular JS to toggle ng-show based on controller variable set from a directive

Looking for help updating a controller variable from a directive to then display the new value using ng-show. Take a look at my implementation below: Controller: self.menuVisible = false; Directive: icon.bind('click', function(){ ...

Data manipulation with Next.js

_APP.JS function MyApp({ Component, pageProps }) { let primary = 'darkMode_Primary'; let secondary = 'darkMode_Secondary' return ( <Layout primary_super={primary} secondary_super={secondary}> <Component {...page ...

having trouble setting up create-react-app

I recently started learning about the React ecosystem and just installed Yarn ➜ WebstormProjects yarn --version 0.23.2 Following the documentation, I then proceeded to install create-react-app globally with Yarn ➜ WebstormProjects yarn global add ...

Utilize jQuery to extract data from a JSON string

Trying to decode a JSON string containing multiple arrays and key:value pairs. Successfully retrieving information from one array, but struggling to access data from a different array with the same keys. The jQuery code snippet in question: $("a").click( ...

Creating a New Row in a Grid Using Javascript

I'm encountering an issue with my Grid View and JavaScript code. When I click the button to add a new row, it successfully adds the row but carries over the data from the previous row and fails to save to the database, resulting in an "Invalid Number" ...

When the window size is reduced, the navigation vanishes

Whenever I resize the window, the navigation bar disappears. Here is the image of the page before resizing the window https://i.sstatic.net/UiRB9.png Below is the image after resizing the window https://i.sstatic.net/X00d2.png Displayed below is the cod ...

The timeline jquery function is failing to function properly within the WordPress theme

Working on the Wordpress Avenue theme, I have a task to incorporate a Timeline jQuery into my project. The jQuery consists of 4 main files: 1. styletime.css 2. modernizrtime.js 3. http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 4. main ...

Typescript error: The 'datepicker' property is not found on the type 'IAugmentedJQuery'

Currently, I am working with AngularJS and Typescript. I encountered an error stating "Property 'datepicker' does not exist on type 'IAugmentedJQuery'.". Can someone please provide guidance on how to fix this issue? angular.element(&a ...