同一页面中的多个脚本

Question

我在一个页面中使用多个脚本元素。问题是当我插入脚本以进行自动完成时，剩余的工作脚本变得没有响应，只有自动完成脚本正在运行。

这是我的脚本代码，所有代码都正常运行。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">

<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">
  function     validate    (evt)     {
      var     theEvent     =     evt     ||     window.event;
      var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 35 || key == 36 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}
</script>

<script language="javascript">
$( document ).ready(function() {
var relval=2;
    $("#relative_addmore").click(function ()
    {
    var newTextBoxDiv = $(document.createElement('div')).attr("id",'relative_div'+relval);
        var param='c=14&count='+ relval;                 
        $.ajax({url:"job_ajax.php",data: param,success:function(result)
        {
            newTextBoxDiv.after().html(result);
        }
        }); 
        relval++;           
        $("#relative_group").append(newTextBoxDiv);
    });

    });
</script>
<script>
//........................Remove button...............
$( document ).ready(function() {
    $("body").on("click","#removeButton", function()
    {
        //user click on remove text
        var a= $(this).parents('div').attr('id');
        //alert(a);
        $("#"+a).remove();
    }); 

    });
</script>

<script language="javascript">
$(document).ready(function()
{
    $("#number1").change(function()
    {
        var value = $("#number1").val();

        var value = value.substr(value.length - 10);

        var pn = value.length;

        var action = $("#action").val();
        $('input[type="submit"]').removeAttr('disabled');
        $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");

            $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");
            $.post("phone_avilable.php",{number1:value},function(data)
            {

              if(data!='' && action!="update")
              {
                $("input[type=submit]").attr("disabled", "disabled");
                $("#msgbox1").fadeTo(200,0.1,function()
                { 
                  $(this).html("<a href=''><font color='red'>Exist! Click Here..</font></a>").addClass('messagebox').fadeTo(100,1);
                }); 
                        return false;   
              }

            });
    });
});
</script>

<script language="javascript">
$(document).ready(function()
{
    $("#number2").change(function()
    {
        var value = $("#number2").val();

        var value = value.substr(value.length - 10);

        var pn = value.length;
        var action = $("#action").val();
        $('input[type="submit"]').removeAttr('disabled');
        $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");

            $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");
            $.post("phone_avilable1.php",{number1:value},function(data)
            {
              if(data!='' && action!="update")
              {
                $("input[type=submit]").attr("disabled", "disabled");
                $("#msgbox1").fadeTo(200,0.1,function()
                { 
                  $(this).html("<a href=''><font color='red'>Exist! Click Here..</font></a>").addClass('messagebox').fadeTo(100,1);

                }); 
                        return false;   
              }

            });
    });
});
</script>

当我将这些脚本添加到同一页面时，上面提到的代码停止工作。只有下面的代码正在工作。

<link rel="stylesheet" type="text/css" href="jquery.ajaxcomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ajaxcomplete.js"></script>
<script>
$(document).ready(function(){
$("#location").autocomplete("ajaxcomplete.php", {
selectFirst: true
});
});
</script><link rel="stylesheet" type="text/css" href="jquery.ajaxcomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ajaxcomplete.js"></script>
<script>
$(document).ready(function(){
$("#location").autocomplete("ajaxcomplete.php", {
selectFirst: true
});
});
</script>

另外两组脚本都正常工作。但不能一起工作。

Answer 1

在你的第一个脚本中你有这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">

<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">
function     validate    (evt)     {
      var     theEvent     =     evt     ||     window.event;
      var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 35 || key == 36 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}
</script>

不确定您是否注意到第3行的<script language="javascript">被打开但从未关闭