Question

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

但是当我使用与html中的html和js窗口中的代码相同的html / javascript来制作file.php时，将该文件加载到我的浏览器中，js行为就不存在了。也就是说，当我点击＆＃34; senior＆＃34;或者＆＃34;学生＆＃34;没有任何反应。

＆＃34;外部资源＆＃34;在小提琴中直接来自file.php中的jquery和jquery移动链接的复制/粘贴。

任何人都知道为什么在小提琴中起作用的代码在加载到浏览器的页面中不起作用？

这里的全部内容是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作为参数传递给另一个函数，而不是直接调用它）

单选按钮适用于小提琴，但不适用于页面

1 个答案: