javascript - 在外部 .js 文件中使用 jQuery 来处理单选按钮的点击

Question

我在 Debian 7.0.0 上使用 jQuery 2.0.2。

我因此设置了一组单选按钮。

<table border="1">
<tr>
<th align="center" colspan="2" style="background:orange">Look Up Table</th>
</tr>
<tr align="left">
<td><input type="radio" name="LUT" id="GREY" value="GREY" onclick="EnableNonlinear()" 
    <?php echo $greyLUT ?>/>Gray</td>
<td><input type="radio" name="LUT" id="HOS" value="HOS" onclick="EnableNonlinear()"  
    <?php echo $hosLUT ?>/>Heated Object</td>
</tr>
</table>

如果我按照这个代码块

<script type="text/javascript">
jQuery('input[name=LUT]').change(function(){
alert('Radio button clicked');
});
</script>

当我单击其中一个单选按钮时，会出现警报框。但是，如果我使用

<script type="text/javascript" src="DisplayOrAnalyzeSingleArray.js"></script>

并放置

jQuery('input[name=LUT]').change(function(){
alert('Radio button clicked');
});

当我单击其中一个单选按钮时，在 DisplayOrAnalyzeSingleArray.js 内没有任何反应。我确实这样做，但是如果我只是输入

，则在加载页面时会出现警报框

alert('Radio button clicked');

在 DisplayOrAnalyzeSingleArray.js 内。

我很困惑为什么单个警报语句在外部文件中起作用，并且如果我将它放在 html 代码中，jQuery 事件处理程序会起作用，但如果我将它放在外部文件中，事件处理程序将不起作用。

我在 Ice Weasel 10.0.12 上使用 Firebug 1.7.3，但控制台上没有出现错误消息。

Answer 1

首先确保您的脚本包含在 jquery 之后 -

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="DisplayOrAnalyzeSingleArray.js"></script>

并将代码包装在 .ready 处理程序中

jQuery(function(){
  jQuery('input[name=LUT]').change(function(){
    alert('Radio button clicked');
  });
});