javascript - jQuery 无法在内联网站点上运行

Question

我正在尝试在内部表单上获取 jQuery 总表单数据。我已经使用了 jsfiddle.net 上的当前代码，它可以与 jQuery 1.6.4 一起使用。

我尝试了多个不同的 jQuery 版本。但总的来说，我对 jQuery/javascript 很陌生，所以我不知道从哪里开始。

任何帮助将不胜感激!

<script type="text/javascript" src="jquery-1.6.4.js">
    var $form = $('#apple-order'),
        $summands = $form.find('.apple'),
        $sumDisplay = $('#total');

    $form.delegate('.apple', 'change', function ()
    {
        var sum = 0;
        $summands.each(function ()
        {
            var value = Number($(this).val());
            if (!isNaN(value)) sum += value;
        });

        $sumDisplay.text(sum);
    });
</script>


<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" id="apple-order">
    <tr>
        <td>
            <form name="apple" method="post" action="insert.php">

                <tr>
                    <td colspan="3" align="center"><strong>Caramel Apple Order Form</strong></td>
                </tr>

                <tr>
                    <td>Employee Name</td>
                    <td>: </td>
                    <td><input name="name" type="text"></td>
                </tr>

                <tr>
                    <td>Plain Caramel Apple</td>
                    <td>: </td>
                    <td><input name="plain" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Snickers</td>
                    <td>: </td>
                    <td><input name="snickers" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Butterfinger</td>
                    <td>: </td>
                    <td><input name="butter" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Mini M&Ms</td>
                    <td>: </td>
                    <td><input name="mini" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Pretzels</td>
                    <td>: </td>
                    <td><input name="pretzel" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td colspan="3" align="center"><strong>Apples w/ Toppings come with Chocolate Drizzle</strong></td>
                </tr>

                <tr>
                    <td colspan="3" align="center">Total: <span id="total"></span></td>
                </tr>

                 <tr>
                    <td colspan="3" align="center"><input type="submit" value="SUBMIT">    </td>
                </tr>


    </tr>
</table>

Answer 1

您的<script>标签的布局不正确。您需要将加载外部库的标签与内联脚本分开，如下所示。在声明 HTML 后，您还应该在页面底部加载 Javascript。

<script type="text/javascript" src="jquery-1.6.4.js"></script>

<script>
var $form = $('#apple-order'),
    $summands = $form.find('.apple'),
    $sumDisplay = $('#total');

$form.delegate('.apple', 'change', function ()
{
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.text(sum);
});
</script>