Question

我有两个模态弹出窗口，我在不同的时间显示。除弹出式父div ID外，一切都是一样的。

<div id="modalNew">
    <div class="modal-content">
        <div class="header">
            <h2>Add Item to Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice"></span><br /><br />

            <label>Quantity:</label>
            <input type="text" id="quantity" name="quantity" placeholder="10">

            <label>Price:</label>
            <input type="text" id="price" name="price" placeholder="$10.00">

        </div>
        <div class="cf footer">
            <input type="button" value="Cancel" id="cancelAdd"><input type="button" value="Add Item" id="addToTable">
        </div>
    </div>
    <div class="overlay"></div>
</div>

<div id="modalUpdate">
    <div class="modal-content">
        <div class="header">
            <h2>Update Item in Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice"></span><br /><br />

            <label>Quantity:</label>
            <input type="text" id="quantity" name="quantity" placeholder="10">

            <label>Price:</label>
            <input type="text" id="price" name="price" placeholder="$10.00">

        </div>
        <div class="cf footer">
            <input type="button" value="Cancel" id="cancelUpdate"><input type="button" value="Delete Item" id="deleteItem"><input type="button" value="Update Item" id="updateTable">
        </div>
    </div>
    <div class="overlay"></div>
</div>

以下JQuery根据price文本框更改了quantity文本框：

$('#quantity').blur(function (){
        var optSelect = $("#itemChoice option:selected").text();
        if (optSelect == "Wine") {
            var ftPrice = (parseInt($("#quantity").val()) * 9.00);
            $("#price").val(ftPrice);
        }
        else if (optSelect == "Shot") {
            var ftPrice = (parseInt($("#quantity").val()) * 4.00);
            $("#price").val(ftPrice);
        }
        else if (optSelect == "Beer") {
            var ftPrice = (parseInt($("#quantity").val()) * 2.50);
            $("#price").val(ftPrice);
        }
    });

$('#itemChoice').change(function() {
        //alert('Value change to ' + $(this).attr('value'));
        if ($(this).attr('value') == "Wine") {
            $("#spanPrice").text("Each: $9.00");
        }
        if ($(this).attr('value') == "Shot") {
            $("#spanPrice").text("Each: $4.00");
        }
        if ($(this).attr('value') == "Beer") {
            $("#spanPrice").text("Each: $2.50");
        }
    });

上述JQuery仅在显示第一个弹出窗口时有效，但在显示第二个弹出窗口时不起作用。

为什么我遇到了这个问题，我该如何解决？

Answer 1

HTML中的ID 唯一。这适用于DOM中的所有内容，可见或不可见。这两个绑定的目标是一个 id，这可能是遍历DOM时第一个出现的两个绑定。

我建议你在这种情况下停止使用Id，并为它们提供data-*属性，普通属性或类名，并使用它们查询它们。例如，因为您在输入上有一个名称，您可以使用该名称进行定位：

$('input[name="quantity"]');

作为旁注，如果在 DOM完成加载之后已加载内容（例如，因为异步事件导致它在那里，例如ajax或其他点击事件），您将需要将事件绑定到较低级别未更改的元素，并使用冒泡来定位元素。

$(document).on('blur', 'input[name="quantity"]', function(event) { ... };

使用您的代码计算饮料成本（未经测试）的示例

var drinks = { wine : 9, shot : 4, beer : 2.5 }; $('div.modal-content').on('blur', 'input[name="quantity"]', function (event) { // Create jQuery element from the delegated target and // work out data based on information in THIS form only. // ( 'this' in context will be the input element for quantity ) var $delegate = $(event.delegateTarget), selected = $delegate.find('select').val(), quantity = parseInt(this.value, 10), price = drinks[selected.toLowerCase()] * quantity; $delegate .find('#price').val(price.toFixed(2)); });

我建议您根据原始回答删除所有ID并替换为类，因为它们不是唯一的。

Answer 2

你需要使用jquery ON或LIVE方法希望它能帮到你

感谢

Answer 3

问题在于价格ID。如果要同时更新价格输入字段，请使用class而不是id。这样两者都将使用jQuery进行更新。

输入字段变为：

<input type="text" class="price" name="price" placeholder="$10.00">

并且jQuery语句更改为：

$(".price").val(ftPrice);

为什么JQuery函数仅适用于第一个文本框

3 个答案: