Forum | Appery.io

Hi,
This is what i have right now:
I've added a panel to 2 pages.
The panel contains a custom component that i've created.
The custom component contains and HTML component with the following code:
precode
<ul data-role="listview" id="menuList" class="menuList ui-listview ui-group-theme-b" name="menuList" data-theme="b" data-divider-theme="b" data-count-theme="b">
<li class="ui-first-child" data-icon="false">
<a id="profileBtn" name="profileBtn" class="ui-btn" data-theme="b">
<i class="fa fa-user fa-lg"></i>
&nbsp; Profile</a>
</li>
<li class="ui-last-child" data-icon="false">
<a name="dishesBtn" class="ui-btn" data-theme="b">
<i class="fa fa-cutlery fa-lg"></i>
&nbsp; Dishes</a>
</li>
</ul>
/code/pre
What i want is to set the following click event on both pages on the same link
precode
$(document)&#46;off("click", '#profileBtn')&#46;on({
click: function() {
if (!$(this)&#46;attr('disabled')) {
Apperyio&#46;navigateTo('Profile', {
reverse: false
});
}
},
}, '#profileBtn');
/code/pre

I've tried to put that code inside the HTML in a script tag but it only affects the first page, and on the second nothing is happening.
If i put similar code in the load event of each page (just using different selectors) it works.

Is it possible to do this so that the JS code would be only in one place instead of on each page?

Thanks!

Hi Slava,

As your code uses elements of HTML page layout, you would need to run it for each page individually.

The way out may be to add it to a separate function that is invoked on Load event for each page.