JavaScript function conflicts and overwrites when jquery mobile loads the dialog box page
Version: jquery mobile 1.1.0/1.2.0
Problem description: There are two pages: Main. cshtml and dialog. cshtml. Both pages are Based on. NET mvc4 and use the default template _ layout. cshtml.
On the Main. cshtm page, load the data list using JavaScript. Click the link to bring up the dialog. cshtml page in the form of a dialog box, and load data using JavaScript on the dialog. cshtml page.
The dialog box is closed and the JavaScript function on Main. cshtml is unavailable!
Experiment shows that this is because jquery mobile loads pages using Ajax, resulting in a conflict between JavaScript Functions with the same name on two pages!
The content of the _ layout. cshtml template of. Net MVC 4 is as follows:
<!DOCTYPE html>
When we create a new page and write <SCRIPT>... </SCRIPT> and HTML tags in the page, we actually write them in the following Div of the template page:
<Div data-role = "content">
@ Renderbody ()
</Div>
When jquery mobile loads other pages using Ajax, it only loads the <Div data-role = "content">... </div> section of the page.
If <Div data-role = "content">... </div> exists in the two pagesJavaScript Functions with the same name,This will cause a conflict.! After the dialog box is closed,The JavaScript function on the mian. cshtml page is changed to dialog. cshtml.
JavaScript function of the same name!
Shows the Ajax loading principle of jquery Mobile:
Summary:
When jquery mobile is used for development, if multiple pages jump to each other with JavaScript Functions, you should name the JavaScript Functions of each page with different names, avoid overwrite conflicts for functions with the same name.