单选按钮在 fiddle 中有效，但在页面上无效

Question

我想在文档中放置一个 jquery 移动单选按钮。 This fiddle 是我想要的小规模表示。它如我所愿。

但是当我制作 file.php 时，html/javascript 与 html 中的代码和 fiddle 中的 js windows 相同，并且将该文件加载到我的浏览器中，js 行为不存在。即，当我点击 "senior" 或 "student" 时，没有任何反应。

fiddle 中的 "external resources" 直接作为 copy/paste 来自 file.php 中的 jquery 和 jquery 移动链接。

有人知道为什么在 fiddle 中工作的代码在加载到浏览器的页面中不起作用吗？

全文如下file.php:

<!DOCTYPE html> 
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'> 
    <title>Electricity in Ontario</title> 
    <link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'>
    <link rel='stylesheet' href='HourDay_Table.css' >
  <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.1.js'></script>
    <script type='text/javascript' src='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'></script>

</head> 

<body> 

<div data-role='page' data-add-back-btn='true' class='ui-alt-icon'>

<script>
//tabs and the hide/show column function


$('#myForm input').on('change', function () {
    var pog = {train_cost:"900",plane_cost:"777"};
    var lca = {train_cost:"5000",plane_cost:"8000"};
    var active = $('input[type="radio"]:checked', '#myForm').val();
    if (active =="sen") {
        $('#tab1 .view-train').text(pog.train_cost);
        $('#tab1 .view-plane').text( pog.plane_cost);
    } else if (active =="stu") {
        $('#tab1 .view-train').text(lca.train_cost);
        $('#tab1 .view-plane').text(lca.plane_cost);
    } else {
        alert('you selected nothing');
    }
});
</script>

   <form id='myForm'>
    <fieldset data-role='controlgroup' data-type='horizontal'>
        <label for='senior'>Senior</label>
        <input type='radio' name='switch' id='senior' value='sen' checked='checked'>
        <input type='radio' name='switch' id='student' value='stu'>
        <label for='student'>Student</label>
    </fieldset>
</form>
<table id="tab1">
    <tr>
        <th>Mode</th>
        <th>Miles</th>
        <th>Cost</th>
    </tr>
    <tr>
        <td>Train</td>
        <td>3.9</td>
        <td class="view-train"></td>
    </tr>
    <tr>
        <td>Plane</td>
        <td>1000</td>
        <td class="view-plane"></td>
    </tr>
</table>
</div>
</body>
</html>

Answer 1

您的脚本是在 <form> 添加到 DOM 之前设置的，因此脚本会尝试在侦听器存在之前将其绑定到 #myForm input。只需将其包裹在：

$(function() {/*your code here*/});

现在这段代码只会在整个页面加载完成后执行。

它应该是这样的：

$(function() {
$('#myForm input').on('change', function () {
alert('x');
var pog = {train_cost:"900",plane_cost:"777"};
var lca = {train_cost:"5000",plane_cost:"8000"};
var active = $('input[type="radio"]:checked', '#myForm').val();
if (active =="sen") {
    $('#tab1 .view-train').text(pog.train_cost);
    $('#tab1 .view-plane').text( pog.plane_cost);
} else if (active =="stu") {
    $('#tab1 .view-train').text(lca.train_cost);
    $('#tab1 .view-plane').text(lca.plane_cost);
} else {
    alert('you selected nothing');
}
});
});

编辑：解释$(function() {});是$(document).ready(function() {});的缩写。所有与 DOM 交互的 jQuery 代码都应包含在其中，以确保在您尝试更改它之前加载所有内容。要清理它，您可以将代码包装在这样的函数中：

function myFunction()
{
    //your code
}

然后这样称呼它：

$(myFunction);

（没有括号，因为你将myFunction作为参数传递给另一个函数，而不是直接调用它）

单选按钮在 fiddle 中有效，但在页面上无效

Radio button works in fiddle, but not on page

radio-button

jquery-mobile