检索新页面时，jQuery Mobile与函数冲突

Question

I have a form for users to login to the site and have placed it in the main menu with opacity set to zero. when a user clicks on login he would be supposed to see the form with performing the function below:

$("#login-form-show").click(function(){
    $("form.hidden").animate({opacity:1},400);
}); 

and the form itself has a button which will call a function to hide the form again as below:

$("#form-close-button").click(function(){
    $("form.hidden").animate({opacity:0},400);
});

it works in the first page and all the pages if they start to load by the user, but the problem is that when the jqueryMobile retrieves the page with its default "pagination" or "method of page loading" which uses ajax, the above functions wouldn't work. (the user has to reload the page to access the form). Note that I have called the script in all pages and on my logic, it should work.

Also note that I am using php, purecss, jquery, jqueryMobile.

you can see the problem in this url: www.obpchap.com

Answer 1

The problem is, that after changing the page, the element with the id "login-form-show" exists twice in the DOM:

I do not know, how you can replace the old page with the new page using jQuery mobile. But you should aim for that.