jquery / jscript not loading

Question

hi can someone explain why the coding below does not work but it work here but it works here http://jsfiddle.net/CDp8t/7/

    <html>
    <head>
        <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

<script type="text/javascript">
    $("#example").focus(function() {
        var first = $(this).find("option").eq(0);
        if(first.val() === "1") {
            first.remove();
        }
    });
</script>
    </head>

    <body>

    <select id="example">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select> 
    </body>
    </html>

It works in the jsfilddle link because there the javascript part is loaded after the select tag is loaded. — Birey
– Birey, Commented Oct 18, 2011 at 20:37
Use http instead of https "ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" if you are usin http. Using https work may not work ( IE ). — Anoop
– Anoop, Commented Oct 18, 2011 at 20:38

Clive · Accepted Answer · 2011-10-18 20:29:52Z

5

I think you just need to add your event handler when the DOM's loaded:

$(document).ready(function() {
  $("#example").focus(function() {
    var first = $(this).find("option").eq(0);
    if(first.val() === "1") {
      first.remove();
    }
  });
});

The <select> element does not exist when you're trying to attach the event to it.

answered Oct 18, 2011 at 20:29

Clive

36.9k8 gold badges89 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hair raisin · Accepted Answer · 2011-10-18 20:29:39Z

2

You are trying to access your #example element before it is created

You could move your script tag to the bottom of your HTML or put the jquery code in a $(document).ready() function

answered Oct 18, 2011 at 20:29

hair raisin

2,62817 silver badges13 bronze badges

Comments

David · Accepted Answer · 2011-10-18 20:30:04Z

2

I'd say the most likely cause is that the DOM isn't loaded on your page when the JavaScript runs, but is when it runs within jsfiddle's sandbox. Try wrapping it to wait for the DOM to load:

$(document).ready(function() {
  $("#example").focus(function() {
    var first = $(this).find("option").eq(0);
    if(first.val() === "1") {
        first.remove();
    }
  });
});

answered Oct 18, 2011 at 20:30

David

221k42 gold badges245 silver badges338 bronze badges

Collectives™ on Stack Overflow

jquery / jscript not loading

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related