我提交了一系列对话框，这些对话框在提交网站上的表单时被调用。我已经调整了移动使用的网站，并将jquery movile（1.4.2）合并到标准的jquery和jquery-ui。
我的问题是，在移动网站上加载所有三个脚本的地方和时间，表单显示的对话框不能与加载的jquery移动脚本一起使用。
以下是我网站的代码;普通jquery（1.11.0），jquery mobile（1.4.2）和jquery ui（1.10.4）由于大小而未显示，但在主html页面中链接。
主要HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/CSS/jquery_mobile.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="CSS/Main.css">
<link rel="stylesheet" type="text/css" href="CSS/Dropdown.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="CSS/Dropdown_ie.css"/>
<![endif]-->
<!--[if IE 8]>
<style>
.contact_form_message
{
width: 320px;
max-width: 330px;
height: 100px;
margin-left: 82px !important;
background-color: #F4FAD8;
color: #2D4206;
margin-top: 5px;
outline: none;
border: 1px solid;
border-color: #A9AC95;
position: absolute;
}
#form_mail_logo
{
width: 50px;
height: 50px;
position:relative;
border: none;
top: -61px;
right: -435px;
}
.contact_form_fieldset
{
padding-left: 10px;
padding-right: 10px;
height: 355px;
}
.Form .ui-dialog-titlebar-close
{
float: right;
margin-top: 90px;
margin-right: 8px;
background-color: #A9AC95;
border: 1px solid;
border-color: #2D4206;
color: #2D4206;
font-size: 16px;
outline: none;
}
</style>
<![endif]-->
<!--[if IE 9]>
<style>
.Form .ui-dialog-titlebar-close
{
float: right;
margin-top: 90px;
margin-right: 8px;
background-color: #A9AC95;
border: 1px solid;
border-color: #2D4206;
color: #2D4206;
font-size: 16px;
outline: none;
}
</style>
<![endif]-->
<meta name="description" content="Tree Pro Ltd">
<meta name="keywords" content="Tree Surgery, TreePro, Tree Pro, Tree Care">
<meta name="author" content="Tree Pro Ltd">
<meta name="viewport" content="width=device-width, initial-scale=0.333">
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<title>
Contact us
</title>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/jquery_ui.js"></script>
<script type="text/javascript" src="JS/Main.js"></script>
<script type="text/javascript" src="JS/dropdownhover.js"></script>
<script type="text/javascript" src="JS/dropdown.js"></script>
<script type="text/javascript" src="JS/cookie_accepted.js"></script>
<script type="text/javascript" src="JS/mobile_detect.js"></script>
</head>
<body id="bodyid">
<div title="Cookie Policy" class="Cookie_Warning" >
<p>Wellcome to Tree Pro Ltd. By using this site, you agree to that cookies will be stored on your computer.</p>
Read more about our cookie policy <a href="privacy.html">here</a>.
</div>
<div class="container">
<p>
<div class="topheader"><img src="Images/general/logo.jpg" alt="logo" id="logo"><span id="sitetitle">Tree Pro Ltd</span><span id="telnumber">Tel: 01622 851576</span>
<a href="http://facebook.treeproltd.co.uk"><img id="facebook_logo" src="Images/icons/Facebook.png" alt="Facebook icon"></a><a href="http://twitter.treeproltd.co.uk"> <img id="twitter_logo" src="Images/icons/Twitter.png" alt="Twitter icon"></a><a href="mailto:contact@treeproltd.co.uk?Subject=Enquiry"> <img id="mail_logo" src="Images/icons/Mail.png" alt="Mail icon"></a></div>
<p>
<div class="bottomheader">
<ul class="dropdown">
<li class="left"><a href="/">Home</a>
<ul class="sub_menu">
</ul>
</li>
<li><a>Our Services</a>
<ul class="sub_menu">
<li class="top"><a href="felling.html">Tree Surgery - Felling</a></li>
<li><a href="pruning.html">Tree Surgery - Pruning</a></li>
<li class="bottom"><a href="patiocleaning.html">Patio Cleaning</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a>
<ul class="sub_menu">
</ul>
</li>
<li ><a>Our Work</a>
<ul class="sub_menu">
<li class="top"><a href="aboutus.html">About Us</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="ourpartners.html">Our Partners</a></li>
<li class="bottom"><a href="faqs.html">FAQ's</a></li>
</ul>
</li>
<li class="right"><a>Contact</a>
<ul class="sub_menu">
<li class="top"><a href="contactus.html">Contact Us </a></li>
<li class="bottom"><a href="findus.html">Find Us</a></li>
</ul>
</li>
</ul>
<form id="searchform" name="search" action="searchresults.php" method="get" >
<input id="searchbox" type="text" name="query" value="" >
<input id="searchbutton" value="Search" onClick="Clear();" type="submit" >
<input id="hidden" type="hidden" name="search" value="1">
</form>
</div>
<div id="mobile_bottomheader">
<select class="mobile_dropdown" id="mobile_select">
<option class="mobile_dropdown_option" value="contactus.html">Contact us</option>
<option value="/">Home</option>
<option value="felling.html">Tree Felling</option>
<option value="pruning.html">Tree Pruning</option>
<option value="patiocleaning.html">Patio Cleaning</option>
<option value="gallery.html">Gallery</option>
<option value="aboutus.html">About us</option>
<option value="testimonials.html">Testimonials</option>
<option value="ourpartners.html">Our Partners</option>
<option value="faqs.html">FAQ's</option>
<option value="findus.html">Find us</option>
</select>
</div>
<p>
<div class="maincontent">
<div class="form_content_title">Contact Us</div>
<br><br>
<div class="form_text_content">
We thank you for taking interest in Tree Pro and appreciate you want to contact us. <br><br>
Please use the contact form below to directly contact us or alternatively email us by clicking the mail icon on the form.
<br><br> To find out where we are, either click <a href="findus.html">here</a> or select the "Find Us" option from the contact menu.
</div>
<img src="Images/general/woodland_1.jpg" alt="Woodland Image" id="static_form_image">
<br><br>
<form data-role="none" class="contact_form" name="contact_form">
<fieldset class="contact_form_fieldset">
<label class="contact_form_label">Name:</label> <input id="name" class="contact_form_input" name="name" type="text"><br><br>
<label class="contact_form_label">E-mail:</label> <input id="email" class="contact_form_input" name="email" type="text"><br><br>
<label class="contact_form_label">Phone:</label> <input id="phone" class="contact_form_input" name="phone" type="text"><br><br>
<label class="contact_form_label">Subject:</label>
<select data-role="none" class="contact_form_input_subject" id="subject" name="subject">
<option data-role="none" value="Tree Surgery">Tree Surgery</option>
<option data-role="none" value="Patio Cleaning">Patio Cleaning</option>
<option data-role="none" value="Fire Wood / Wood Chippings">Fire wood / Wood chippings</option>
<option data-role="none" value="Testimonial">Testimonial</option>
<option data-role="none" value="Complaint">Complaint</option>
<option data-role="none" value="Other">Other</option>
</select>
<br><br>
<label class="contact_form_label">Message:</label> <textarea class="contact_form_message" id="message" name="message"></textarea>
<br><br>
<input class="contact_form_button" name="submit" data-role="none" type="submit" onclick="Form_Validation()" value="submit">
</fieldset>
</form>
<a href="mailto:contact@treeproltd.co.uk?Subject=Enquiry"> <img id="form_mail_logo" src="Images/icons/Mail.png" alt="Mail icon"></a>
<div id="success_message" title="Thankyou" class="hidden_message" >
<p>Thank you for contacting us, we shall be in touch shortley.</p>
</div>
<div id="no_name_message" title="No Name entered" class="hidden_message">
<p >No name has been entered, please enter a name.</p>
</div>
<div id="invalid_email_message" title="Invalid E-mail address" class="hidden_message">
<p>The email address you have entered is invalid, please enter a valid one.</p>
</div>
<div id="invalid_phone_message" title="Invalid phone number" class="hidden_message">
<p>The phone number you have entered is invalid, please enter a valid one consisting of 11 digits.</p>
</div>
<div id="invalid_phone_and_email_message" title="Invalid contact details" class="hidden_message">
<p>Both the phone number and the email address you have entered are not valid, please ensure they are both correct.</p>
</div>
</div>
<p class="maincontentspace"></p>
<br><br>
<div class="footer">
<p>
<div id="footer_links"><a href="terms.html">Terms & Conditions</a> <a href="privacy.html">Privacy Policy</a> <a href="help.html">Help</a></div>
<div id="copyright">© Copyright Tree Pro Ltd 2014 </div></div>
<p class="footerspace"></p>
</div>
</body>
</html>
mobile_detect.js （确定是否按屏幕宽度加载jquery mobile，如果是，还会显示ID元素“mobile_select”，该网站的移动导航菜单是什么。）
$(function(){
if (screen.width < 600)
{
var imported = document.createElement('script');
imported.src = '/JS/jquery_mobile.js';
document.head.appendChild(imported);
document.getElementById("mobile_select").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
}
});
main.js （在表单提交期间满足条件时显示隐藏div的对话框）
// Initation when submit button is clicked
$(function() {
$(".contact_form_button").click(function() {
//Getting ID's from html
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var subject = $("select#subject").val();
var message = $("textarea#message").val();
//Triming of white space for email adresses and phone numbers
var trimed_email = $.trim($("#email").val());
var trimed_phone = $.trim($("#phone").val());
//Getting posistion of email elemnts
var x=document.getElementById("email").value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
//Validation below
if (document.getElementById("name").value == "")
{
$("#no_name_message").dialog({dialogClass: "Form"});
return false;
}
else if (((atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) && (trimed_email.length>=1)) && (trimed_phone.length!==11 && trimed_phone.length!==0))
{
$("#invalid_phone_and_email_message").dialog({dialogClass: "Form"});
return false;
}
else if (trimed_phone.length!==11 && trimed_phone.length!==0 )
{
$("#invalid_phone_message").dialog({dialogClass: "Form"});
return false;
}
else if ((atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) && (trimed_email.length>=1))
{
$("#invalid_email_message").dialog({dialogClass: "Form"});
return false;
}
else
{
//Form proceesing below
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "php/form.php",
data: dataString,
success: $("#success_message").dialog({dialogClass: "Form"}),
});
return false;
}
});
});
那么，当加载jquery mobile时，为什么带有“hidden_message”类的div没有出现的任何想法？
任何帮助非常感谢，Elliott。
答案 0 :(得分：0)
我最终解决了它。不得不调整其中一个java脚本文件，因为这样会阻止加载对话框的JS代码。