title: Kendo UI Mobile - Trouble calling function on button click
body: <p>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. Along with the text, I need to have a delete button to remove these items from the array. </p>
  
  <p>Since I'm adding the delete buttons to the DOM after I initialize Kendo UI, I assume I need to  use the <code>.kendoMobileButton()</code> method on each button I add. If I don't do this, my buttons aren't styled correctly, despite being given the attribute <code>data-role="button"</code>.</p>
  
  <p>Still, when I try to use these buttons, I can't get them to call a function with <code>data-click="deleteNumber"</code>. The function simply doesn't seem to fire. Any hints?</p>
  
  <p>Here is a quick example I threw together that illustrates my problem: <a href="http://crocdoc.ifas.ufl.edu/files/kendo_example/" rel="nofollow">http://crocdoc.ifas.ufl.edu/files/kendo_example/</a> </p>
  
  <p>It is pasted here for easy reference:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Example code&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"&gt;
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/kendo.mobile.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div data-role="view" id="main"&gt;
      &lt;div data-role="header"&gt;
          &lt;div data-role="navbar"&gt;Generate numbers&lt;/div&gt;
      &lt;/div&gt;  
  
      &lt;a data-role="button" data-click="addNumber" style="display: block; margin: 10px; text-align: center;"&gt;Add number&lt;/a&gt;
      &lt;div id="number_list" style="padding: 0 20px 0 20px;"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;script&gt;
      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 + ' &lt;a id="delete_' + current_index + '" data-role="button" data-click="deleteNumber"&gt;Delete&lt;/a&gt;&lt;br &gt;');
          $('#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 &lt; number_container.length; i++) {
              $('#number_list').append('Number '+i+': '+number_container[i]+' &lt;a id="delete_' + i + '" data-role="button" data-click="deleteNumber"&gt;Delete&lt;/a&gt;&lt;br &gt;');
          }
  
      }; 
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>