jQuery selector dont work?

Question

hi im starting to learn jquery, i read tutorial and i constructed my code but i wonder why this code does not work on my page:

<script src="jquery-1.9.1.js"></script>  
<script src="jquery-ui.js"></script>
<script src="jquery-min.js"></script>
<script type="text/javascript">
  $("#storage").change(function(){
    alert("sample ng onchange");    
  });
</script>


<tr><td><s:text name="label.storageArea" /></td>
<td><s:select  name="mediaBean.storageAreaDesc" 
            list="storageAreaList"              
            value="%{mediaBean.storageAreaDesc}" 
            size="1" style="width:155px;" 
            theme="simple" id="storage" />
</td>   
</tr>

please help. thank you.

Here is the resulting HTML of tag:

<select name="mediaBean.storageAreaDesc" size="1" id="storage" style="width:155px;">
    <option value="1 - Storage 1" selected="selected">1 - Storage 1</option>
    <option value="2 - Storage 2">2 - Storage 2</option>
    <option value="3 - Storage 3">3 - Storage 3</option>
</select>

You need to use document ready handler. http://api.jquery.com/ready/ — Ram, May 23 '13 at 00:45
Add to that, with `` not being a standard HTML element, if it shows in the page, support for selecting it by ID may well depend on how lax the browser is about that stuff. If the element is expanded at runtime by your framework, you might want to show the resulting HTML. — cHao, May 23 '13 at 00:47

score 2 · Accepted Answer · answered May 23 '13 at 00:46

2

Because your script is before the HTML , encase that in DOM ready handler . This makes sure the script runs after the DOm loads.

<script type="text/javascript">
  $(function() {
      $("#storage").change(function(){
         alert("sample ng onchange");    
      });
   });
</script>

answered May 23 '13 at 00:46

Sushanth --

55,259
9
66
105

Does that mean that script after the HTML is guaranteed to execute after the DOM has loaded? – Chris May 27 '13 at 04:18

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

maybe you need to wrap your js code in a jquery document ready block

see http://api.jquery.com/ready/ and Jquery select change

edited May 23 '17 at 12:18

Community

1
1

answered May 23 '13 at 00:45

Scary Wombat

44,617
6
35
64

sorry i was not able to accept two answers but your solution is also correct. thanks for responding! – janell May 23 '13 at 01:34

score 0 · Answer 3 · answered May 23 '13 at 00:48

0

first, put all your js at the bottom of your page and use this to wrap your code

;(function($) {
    $(document).ready(function() {
        // Stuff to do as soon as the DOM is ready. 
        // Use $() w/o colliding with other libs;
    })
})(jQuery);

answered May 23 '13 at 00:48

Francisco Javier Arenas Ulloa

102
7

2

There is no real reason to put it at the bottom of the page if it is wrapped by a `$(document).ready` handler. – Chris May 23 '13 at 00:59
it's just a common good practice, http://developer.yahoo.com/performance/rules.html#js_bottom – Francisco Javier Arenas Ulloa May 24 '13 at 13:26
Yes, but from your comment it sounded to me like it was a requirement to make the code work, but that is not the case. See http://stackoverflow.com/questions/855077/does-putting-scripts-on-the-bottom-of-a-web-page-speed-up-page-load for more information on why it might be a good idea, but not a must-have. – Chris May 27 '13 at 00:47

jQuery selector dont work?

3 Answers3