Javascript not working in script tags? [duplicate]

问题

I need to know why it's doing this because I'm using the javascript in the script tags on my site and it's not working.

Why does my javascript not work in the script tags (switch will not switch) http://jsfiddle.net/J7L4k/2/

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
        $('.btn-toggle').click(function() {
    $(this).find('.btn').toggleClass('active');  

    if ($(this).find('.btn-primary').size()>0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }
    if ($(this).find('.btn-danger').size()>0) {
        $(this).find('.btn').toggleClass('btn-danger');
    }
    if ($(this).find('.btn-success').size()>0) {
        $(this).find('.btn').toggleClass('btn-success');
    }
    if ($(this).find('.btn-info').size()>0) {
        $(this).find('.btn').toggleClass('btn-info');
    }

    $(this).find('.btn').toggleClass('btn-default');

});

$('form').submit(function(){
    alert($(this["options"]).val());
    return false;
});
    </script>

    <h4>Tiny</h4>
  <div class="btn-group btn-toggle"> 
    <button class="btn btn-xs btn-default">ON</button>
    <button class="btn btn-xs btn-primary active">OFF</button>
  </div>

However it works fine when the javascript is moved to JSFiddles javascript container? http://jsfiddle.net/udKj5/3/

thanks a lot.

回答1:

ok, so the reason why it doesn't work is that, at the time that the javascript first runs (and sets the on-click function on 'btn-toggle') there are no btn-toggle items in the page (because the page is still loading).

You need to run this stuff only after document.load

This happens by default in the jsfiddle which is why it works there. If you right-click and inspect on the jsfiddle page, you'll find it has converted your script to:

//<![CDATA[ 
window.onload=function(){
$('.btn-toggle').click(function() {
    $(this).find('.btn').toggleClass('active');  

    if ($(this).find('.btn-primary').size()>0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }
    if ($(this).find('.btn-danger').size()>0) {
        $(this).find('.btn').toggleClass('btn-danger');
    }
    if ($(this).find('.btn-success').size()>0) {
        $(this).find('.btn').toggleClass('btn-success');
    }
    if ($(this).find('.btn-info').size()>0) {
        $(this).find('.btn').toggleClass('btn-info');
    }

    $(this).find('.btn').toggleClass('btn-default');

});

$('form').submit(function(){
    alert($(this["options"]).val());
    return false;
});
}//]]>

which clearly works... so try that instead

回答2:

Your Javascript is running, but it is running before the DOM initializes, and as a result, the various JQuery selectors match no elements and the code appears to do nothing.

To fix this, either wrap your code in the ondomready event handler, or move all your javascript to the very bottom of the page so that the DOM is encountered before the scripts are executed.

To wrap your code in an ondomready event hander, do this:

$(function () {

// your code here

});

The above structure can appear anywhere on the page, even at the top as you have it, and jquery will automatically run it at the appropriate time.

回答3:

This is because your code is running before the DOM elements are initialised thus the code cannot find those elements on the page. Try enclosing your code in