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>

Answer 2

您试图在元素存在之前访问它们。将代码包装在DOM就绪处理程序中。此外，如果您的script元素具有src属性，则无法将代码放入其中。您需要两个script代码：

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$(function () {
    var $form = $('#apple-order'),

    // etc

});
</script>

默认情况下，jsfiddle将您的代码包装在onLoad处理程序中，这可能会造成混淆。

Answer 3

首先声明所有库

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

然后在另一个地方开始编码

<script>
// do something
</script>

Answer 4

我认为问题在于你实际上并没有导入jQuery。尝试在脚本之前添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

这将从谷歌的CDN下载jQuery。

jQuery没有在Intranet站点上工作

4 个答案: