jquery code is not working

问题

Good day All,

I've faced a problem using a jquery script on my html page.

The script works fine on jsfiddle

On my page I used:

<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>

But on page load it does notwork.

回答1:

You must wrap the code of bookform.js inside DOM ready handler, just like:

$(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>');
    }
});
});

回答2:

Try to wrap your code inside DOM ready handler $(document).ready(function() {....}) or shorter form $(function() {....}) to make sure all your DOM elements are loaded properly before executing your jQuery code.

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

回答3:

Add the script tag for jquery library in head tag of page.Like this:

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

回答4:

Probably, the problem is that your script loads AFTER the all DOM elements are being loaded.

You need to inverse that. There are two answers above: one says to include your <script></script> tag inside the <head> container.

It may work, but the script may shot before the whole page is loaded. To prevent this from happening, simply wrap all your jQuery code into this function:

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

It is the same as $(document).ready() and so on.

If still does not work, try to enable a console (by pressing F12 in Google Chrome and search for errors).

来源：https://stackoverflow.com/questions/22194655/jquery-code-is-not-working