jQuery 选择器不起作用？

Question

嗨，我开始学习 jquery，我阅读了教程并构建了我的代码，但我想知道为什么这段代码在我的页面上不起作用：

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

请帮忙。谢谢。

下面是标签的 HTML：

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

Answer 1

因为您的脚本 在 HTML 之前，请将其包含在 DOM ready handler 中。这可以确保脚本在 DOm 加载后运行。

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

Answer 2

也许你需要将你的 js 代码包装在一个 jquery 文档就绪块中

见http://api.jquery.com/ready/和Jquery select change

Answer 3

首先，将你所有的 js 放在页面底部，并用它来包装你的代码

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