Function not working properly when called within onDeviceReady

Question

I am making an app which creates some elements which links the user to another page. The code looks something like this.

  function showThis(){

    $('<a class="routePage"></a>').prependTo($('#updateCol')).slideDown("500",function(){}‌​)

function onDeviceReady() {
  $('.routePage').on('click',function(e){
    window.location = "page2.html";
  });
  showThis();
}
  showThis();

Unfortunately, only the element which was created by the showThis() outside the onDeviceReady will trigger the window.location change. For more complicated reasons, my app requires the showThis() to be inside the onDeviceReady function. Does anyone have a possible reason as to why this does not work?

Answer 1

This might help attaching-click-event-to-a-jquery-object-not-yet-added-to-the-dom . You might have to use:

$('body').on('click', '.routePage', function (e) {
     window.location = "page2.html";
});

and maybe substitute a parent element for body.

Sorry about the comment formatting:

You have this also:

<a class="routePage"</a>, should be <a class="routePage"></a> ?