同一頁面中有多個腳本

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">已打開但從未關閉