Question

我在我的代码中使用了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>

有没有办法解决这个问题。

Answer 1

你不应该并行运行两个版本的JQuery。

您是否看过JQuery migrate，以添加对旧版本的支持。

或者您可以使用jQuery.noConflict()

api jquery

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>" );

Code Example

由于JQuery冲突，没有页面刷新的JQuery表单提交无法正常工作

1 个答案: