我在我的代码中使用了 2 个 JQuery，1 个用于表单提交，另一个用于模式弹出窗口。
<script src="js/jquery-min.js" type="text/javascript"></script>用于表单提交
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>用于模态弹出窗口。
我的 JQuery 表单提交是在模态弹出窗口中。如果我删除 <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>从代码来看，模态弹出窗口将不起作用，因此不会提交表单。
我的代码是，
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="js/jquery-min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.lightbox-0.5.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<script>
$(document).ready(function() {
var form = $('#add_page_form'); // contact form
var submit = $('#add_page'); // submit button
var alert = $('.alert2'); // alert div for show alert message
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
// sending ajax request through jQuery
$.ajax({
url: 'update_profile_name.php', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
$('#img2').show();
},
success: function(data) {
alert.html(data).fadeIn(); // fade in response data
form.trigger('reset'); // reset form
$('#img2').hide();
},
error: function(e) {
console.log(e);
}
});
});
});
</script>
<body>
<div align="center"><a class="js-open-modal btn" href="#" data-modal-id="popup1">select</a></div>
<div id="popup1" class="modal-box">
<header>
<a href="#" class="js-modal-close close">×</a>
<h3>Page Design for Menu</h3>
</header>
<div class="modal-body">
<form action="" method="post" id="add_page_form">
<textarea name="descr"></textarea><br><br>
<input type="submit" name="descr_add" value="add" id="add_page" />
</form>
<img src="../images/Preloader_2.gif" id="img2" style="display:none" /><div class="alert2" style="display:none">message</div>
<footer>
<a href="#" class="btn btn-small js-modal-close">Close</a>
</footer>
</div>
<script>
$(function(){
var appendthis = ("<div class='modal-overlay js-modal-close'></div>");
$('a[data-modal-id]').click(function(e) {
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
//$(".js-modalbox").fadeIn(500);
var modalBox = $(this).attr('data-modal-id');
$('#'+modalBox).fadeIn($(this).data());
});
$(".js-modal-close, .modal-overlay").click(function() {
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
window.location.hash = this.hash;
$($(this).attr('href')).fadeIn('slow');
window.location.href = "menu.php";
});
});
$(window).resize(function() {
$(".modal-box").css({
top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
left: ($(window).width() - $(".modal-box").outerWidth()) / 2
});
});
$(window).resize();
});
</script>
</body>
有什么办法可以解决这个问题。
最佳答案
你不应该同时运行两个版本的 JQuery。
您是否看过 JQuery 迁移，以添加对旧版本的支持。
或者你可以使用 jQuery.noConflict()
HTML
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
<div id="log">
<h3>Before $.noConflict(true)</h3>
</div>
Javascript
var $log = $( "#log" );
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)
jq162 = jQuery.noConflict( true );
$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
关于javascript - 由于 JQuery 冲突，没有页面刷新的 JQuery 表单提交无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32651596/