I have developed a function that creates a transparent information overlay on a current div for a mobile web app.
Context: I am using jQTouch, which means I have separate divs instead of loading individual pages anew.
$(document).ready(function() {
$('.infoBtn').click(function() {
$('#overlay').toggleFade(400);
return false;
});
});
When I click the button on the first div, the function works fine as JavaScript runs sequentially. However, when I navigate to the next div and click the same button, nothing seems to happen. The function does get triggered when I go back to the first div, though.
As a workaround, I ended up duplicating the function and changing the CSS selector names, which solves the issue for both divs.
But is there a more efficient way to achieve this without duplicating the function for each use case? Is it possible to use the same selectors but load different content in each variation?