-3

目标是 onClick 更改输入和显示的价格。下面的代码适用于 jquery 1.3.0，但不适用于 1.10.1。我错过了什么？如果有更好的方法请告诉我。

$(document).ready(function () {
    $("").click(update2);
});

function update2() {
    var Myprice = $("#price").val();
    $('#displayPrice').html('Price: ' + Myprice + '');
}

HTML 标记 -

<input type="hidden" name="price" id="price" class="item_price" value="$15.00">
</label>
<div id="displayPrice" name="displayPrice" class="form_total">Price: $25.00</div>
<div class="xsshirt">
    <input id="size5" class="product-attr-size" name="size" type="radio" value="XSmall" onClick="document.getElementById('price').value='$25.00'" />
    <label for="XSmall"></label>
</div>
<div class="sshirt">
    <input id="size1" class="product-attr-size" name="size" type="radio" value="Small" onClick="document.getElementById('price').value='$25.00'" />
    <label for="Small"></label>
</div>
<div class="mshirt">
    <input id="size2" class="product-attr-size" name="size" type="radio" value="Medium" onClick="document.getElementById('price').value='$25.00'" />
    <label for="Medium"></label>
</div>
<div class="lshirt">
    <input id="size3" class="product-attr-size" name="size" type="radio" value="Large" checked="checked" onClick="document.getElementById('price').value='$25.00'" />
    <label for="Large"></label>
</div>
<div class="xlshirt">
    <input id="size4" class="product-attr-size" name="size" type="radio" value="XLarge" onClick="document.getElementById('price').value='$30.00'" />
    <label for="XLarge"></label>
</div>
</div>
4

4 回答 4

4

您应该使用 $({some selector}) 而不是 $("")。您没有使用 $("") 将单击处理程序附加到任何内容。

正如其他人所说，在以前版本的 jQuery 上使用 $("") 默认选择器为文档，因此它与 $(document) 相同。无论哪种方式，将侦听器附加到文档或文档正文都不是一个好习惯。尝试将它附加到一个更接近被单击的元素（不是被单击的元素本身，因为这意味着您正在乘以执行相同操作的处理程序，而不是只有一个）。

在这种特殊情况下，我会为衬衫项目添加一个包装器，并为其附加一个委托事件侦听器，如下所示：

<div id="shirts">
    <div class="xsshirt">
        <input id="size5" class="product-attr-size" name="size" type="radio" value="XSmall" onClick="document.getElementById('price').value='$25.00'" />
        <label for="XSmall"></label>
    </div>
    <div class="sshirt">
        <input id="size1" class="product-attr-size" name="size" type="radio" value="Small" onClick="document.getElementById('price').value='$25.00'" />
        <label for="Small"></label>
    </div>
    <div class="mshirt">
        <input id="size2" class="product-attr-size" name="size" type="radio" value="Medium" onClick="document.getElementById('price').value='$25.00'" />
        <label for="Medium"></label>
    </div>
    <div class="lshirt">
        <input id="size3" class="product-attr-size" name="size" type="radio" value="Large" checked="checked" onClick="document.getElementById('price').value='$25.00'" />
        <label for="Large"></label>
    </div>
    <div class="xlshirt">
        <input id="size4" class="product-attr-size" name="size" type="radio" value="XLarge" onClick="document.getElementById('price').value='$30.00'" />
        <label for="XLarge"></label>
    </div>
</div>

JS

$("#shirts").on("click", ".product-attr-size", update2);
于 2013-09-03T16:14:30.053 回答
2

在旧版本的 jQuery 中，$("")并$()返回document，因此您当前的代码将单击事件绑定到文档。

只需更新您的选择器以定位文档。

$(document).click(...

甚至更好，让它定位更接近目标元素的父元素（无论目标元素是什么，您肯定不想捕获文档上的所有点击事件吗？）

于 2013-09-03T16:18:14.273 回答
0

我认为 $("") 的行为发生了变化。尝试将点击事件绑定到正文：

$("body").click(update2);

这样，单击页面上的任何元素都会使 DOM 冒泡到正文。

于 2013-09-03T16:19:52.437 回答
0 
$(document).ready(function () {
    $("*").click(update2);
});

function update2() {
    var Myprice = $("#price").val();
    $('#displayPrice').html('Price: ' + Myprice + '');
}

$("*")附加点击事件时查看选择器。确保将 * 替换为更相关的内容，$("input:radio[name=size]").click(update2);以便仅在单击单选按钮时价格会发生变化。

演示小提琴

于 2013-09-03T16:18:24.550 回答