无法在具有相同 class 名称 (jQuery) 的多个元素中定位单个输入

Question

我有一个包含 li 个元素列表的页面，每个元素都称为 .section。该页面仅从一个部分开始，但用户可以通过单击添加更多部分。每个部分都有一个名为 .wip-location 的下拉列表和三个名为 .section-number、.section-name 和 .section-description 的输入字段。（-number 和 -description 输入无关紧要，但我将它们包含在此处以防它们引起问题。）

每次更改下拉菜单时，我都希望将所选文本填充到 .section-name 输入中。

这第一次有效（当页面上只有一个 .section、.wip-location 和 .section-name 时），但一旦用户添加更多 .sections，似乎 Jquery 无法确定要对哪个元素进行操作，并且没有填充任何输入。

HTML

<li class="section">
    <div class="form-group row">
        <label class="col-sm-2 text-sm-right">Section Number</label>
        <div class="col-sm-7">
            <input class="section-number" type="number" step="0.01" min="1" />
        </div>

        <label class="col-sm-2 text-sm-right">Section Name</label>
        <div class="col-sm-7">
            <input class="section-name" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 text-sm-right">Section Description</label>
        <div class="col-sm-7">
            <textarea class="section-description" />
        </div>

        <label class="col-sm-2 text-sm-right">WIP Location</label>
        <div class="col-sm-7">
            @Html.DropDownListFor(m => m.WipLocation,
                                        new SelectList(Model.WipLocations, "Key", "Value"),
                                        "-- select --",
                                        new { @class = "wip-location" })
        </div>
    </div>
</li>

jQuery

// Automatically add Wip Location choice to Section Name input
$('.wip-location').change(function () {
    var $location = $('option:selected', $(this)).text();
    var $section = $(this).closest('.section');
    var $sectionName = $section.find('.section-name');

    $sectionName.val($location);
});

正如我所说，当页面上只有一个 .section 和 .wip-location 时，它工作得很好。我怀疑 jQuery 在有多个 .wip-location 或其他东西时会感到困惑，但我不确定这是否真的是问题或如何解决它。

Answer 1

由于它是动态添加的，您可以尝试这样调用事件：

$(document).on('change', '.wip-location', function(){/*...*/})

无法在具有相同 class 名称 (jQuery) 的多个元素中定位单个输入

Having trouble targeting a single input among multiple elements with the same class name (jQuery)

javascript

jquery

html

drop-down-menu

targeting