Question

美好的一天，

我在html页面上使用jquery脚本遇到了问题。

该脚本在jsfiddle

上正常工作

在我的页面上，我使用了：

<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript">
</script>  <script src="bookform.js" type="text/javascript"></script>

Pickup location:<br><input placeholder="dd-mm-yyyy" type="date" name="date" required="required">
 Name on meeting plate:<br><input type="text" name="name" required><br>
 Your phone number:<br><input type="text" name="phone" required><br>
Time of pickup:<br> <input class="large" type="text" name="time" required="required"><br>
Pickup location:<br> 
          <select name="select1" id="select1">
            <option>Where to pickup</option>
            <option value="pick_airport">Airport</option>
            <option value="pick_railway">Railway station</option>
            <option value="pick_address">Address</option>
          </select>
    <div id ="pick_nextStep"></div>
    Dropoff location:<br>
          <select name="select2" id="select2">
              <option>Where to dropoff</option>
            <option value="drop_airport">Airport</option>
            <option value="drop_railway">Railway station</option>
            <option value="drop_address">Address</option>
          </select>
    <div id ="drop_nextStep"></div>

但是在页面加载时它不起作用。

Answer 1

您必须将bookform.js的代码包装在DOM就绪处理程序中，就像：

$(document).ready(function() {
$('#select1').change(function(){
    if($(this).val() == 'pick_airport'){
        $('#pick_nextStep').html('<select name="pickup_location" required="required" id="select1"><option>Select airport</option><option value="Sheremetievo (SVO)">Sheremetievo (SVO)</option><option value="Domodedovo (DME)">Domodedovo (DME)</option><option value="Vnukovo (VKO)">Vnukovo (VKO)</option></select><br>Flight: <br><input  type="text" name="flight" required size="20" maxlength="255">');
    }
    if($(this).val() == 'pick_railway'){
       $('#pick_nextStep').html('<select name="pickup_location" required="required" id="select1"><option value="Belorusskiy">Belorusskiy</option><option value="Kazanskiy">Kazanskiy</option><option value="Kurskiy">Kurskiy</option><option value="Kievskiy">Kievskiy</option><option value="Leningradskiy">Leningradskiy</option><option value="Paveleckiy">Paveleckiy</option><option value="Rizskiy">Rizskiy</option><option value="Saveloskiy">Savelovskiy</option><option value="Yaroslavskiy">Yaroslavskiy</option></select><br>Wagon:<br><input  type="text" name="flight" required size="20" maxlength="255">'); 
    }
    if($(this).val() == 'pick_address'){
        $('#pick_nextStep').html('Pickup address:<br><input name="pickup_location" type="text" size="20" maxlength="255">');
    }
});
$('#select2').change(function(){
    if($(this).val() == 'drop_airport'){
        $('#drop_nextStep').html('<select name="pickup_location" required="required" id="select1"><option>Select airport</option><option value="Sheremetievo (SVO)">Sheremetievo (SVO)</option><option value="Domodedovo (DME)">Domodedovo (DME)</option><option value="Vnukovo (VKO)">Vnukovo (VKO)</option></select><br>');
    }
     if($(this).val() == 'drop_railway'){
       $('#drop_nextStep').html('<select name="pickup_location" required="required" id="select2"><option value="Belorusskiy">Belorusskiy</option><option value="Kazanskiy">Kazanskiy</option><option value="Kurskiy">Kurskiy</option><option value="Kievskiy">Kievskiy</option><option value="Leningradskiy">Leningradskiy</option><option value="Paveleckiy">Paveleckiy</option><option value="Rizskiy">Rizskiy</option><option value="Saveloskiy">Savelovskiy</option><option value="Yaroslavskiy">Yaroslavskiy</option></select>')
     }
    if($(this).val() == 'drop_address'){
        $('#drop_nextStep').html('Your destination address:<br><input type="text" name="dropoff_location" required>');
    }
});
});

Answer 2

尝试将代码包装在DOM就绪处理程序$(document).ready(function() {....})或更短的$(function() {....})内，以确保在执行jQuery代码之前正确加载所有DOM元素。

$(function() {
    // Your code here
});

Answer 3

在页面的head标签中添加jquery库的脚本标签。就像这样：

<head>
 <script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script> 
</head>

Answer 4

问题可能是您的脚本在加载所有DOM元素之后加载。

你需要反过来。上面有两个答案：一个说明要在<script></script>容器中包含您的<head>标记。

它可能有效，但脚本可能会在整个页面加载之前拍摄。要防止这种情况发生，只需将所有jQuery代码包装到此函数中：

$(function(), { 
  // your code here;
});

与$(document).ready()相同，依此类推。

如果仍然无效，请尝试启用控制台（在Google Chrome中按F12并搜索错误）。

jquery代码不起作用

4 个答案: