Question

My jquery mobile layout has a navigation bar that contains both buttons. When click on a button, another file (html5+jquery-mobile) should be loaded and is not because doesn’t call related javascripts! However, if I load that file individualy, works as charm.
External link call is not a solution because transitions will then be missed. How to solve it? Thank you.

file call (jquery)

$("#head").append("<a href='"+linkIz+".html' data-role='button'  data-transition='flip'  data-icon="+iconoIz+" >"+textoIz+"</a>");

Answer 1

Here’s a pretty simple solution. Place all of your site’s JS in an external file, then include that file in every HTML document. That way all the JS for the whole site will be available no matter what page the user landed on your site or if the user refreshes the page.

Your file could include this to put navigation bars on each page as it is initialized:

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    $(this).children('[data-role="header"]').append("<a href='" + linkIz + ".html' data-role='button'  data-transition='flip'  data-icon=" + iconoIz + " >" + textoIz + "</a>");
});

Make sure to use event delegation since you won’t know exactly when any specific page is in the DOM.

Also I’m assuming that #head is the data-role="header" element for a page, if this is the case then you should change that to .head (class instead of ID) because you can have multiple pages in the DOM at once, so all IDs for the entire website have to be unique. I generally give each data-role="page" element an Id, then I use classes to get more specific within pages, this assures I’m not creating multiple elements with the same ID that can be in the DOM at the same time.