在多個具有相同類名稱的元素（jQuery）中定位單個輸入時遇到困難

我有一個包含li元素列表的頁面，每個元素都被稱爲.section。該頁面僅以一個部分開始，但用戶可以通過點擊添加更多內容。每個部分都有一個名爲.wip-location的下拉列表和三個輸入字段，分別稱爲.section-number,.section-name和.section-description。（數字和描述輸入是無關的，但我將它們包括在這裏以防萬一它們引發問題。）在多個具有相同類名稱的元素（jQuery）中定位單個輸入時遇到困難

每次更改下拉列表時，我都希望所選文字填充到.section-name輸入中。

這工作第一次（有當只有一個.section，.wip-location和.section-name在頁面上），但只要用戶增加了更多的.section S，似乎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在頁面上，它完美的作品。我懷疑當有多個.wip-location s或者其他東西時，jQuery會感到困惑，但是我不確定這是真的問題還是如何解決。

來源

2017-08-01 Nathan R

使用事件代表團附加事件動態創建的元素 – guest271314

既然是動態添加，你可以嘗試調用像這樣的事件：

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

來源

2017-08-02 00:03:44 stefanz

在多個具有相同類名稱的元素（jQuery）中定位單個輸入時遇到困難

回答

相關問題