動的リストから親IDを取得できません

Question

選択要素をクリックすると、親IDではなく選択IDが返されます。私は間違っているの？私はselect要素に今のよう

var index = $("#olcityList li").length; 
 
var $li = $('li.list'); 
 

 
$('#plus').click(function() { 
 
    index = index + 1; 
 

 
    $('li.list').last().after($li.clone()); 
 

 
    $(this).attr('id', 'listId_' + (index)).attr('class', ' '); 
 
    $('li.list div.city select').last().attr('id', 'cityList_' + (index)); 
 
    $('li.list div.esta select').last().attr('id', 'estaList_' + (index)); 
 

 
    // Get the select id and its parent id 
 
    $('body').on('click', 'select', function() { 
 
    $('#olcityList li:last').attr('id', 'listId_' + (index)); 
 

 
    var appendedlistId = $('li.list').last().attr('id'); 
 
    
 

 
    console.log("Parent id:" + $('select').closest('li').attr('id')); 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input id="plus" type="button"> 
 
    <input id="minus" type="button"> 
 
    <input id="getEachId" type="button"> 
 
</div> 
 
<ol id="olcityList"> 
 
    <li class="list" id="listId_1"> 
 
    <div class="city"> 
 
     <select id="cityList_1"></select> 
 
    </div> 
 
    <div class="esta"> 
 
     <select id="estaList_2"></select> 
 
    </div> 
 
    </li> 
 
</ol>

を操作するための親IDを必要とすることは、選択ID とLiの親IDと同じ親IDを返します。最初の要素は常にリーです：要素が追加します

Answer 1

要素を正しく作成していないし、イベントハンドラを#plusボタンのクリックイベントハンドラの外に移動することもあります。

clone() DOMフラグメントを作成する場合は、clone要素への参照を取得し、すべての操作を実行します。たとえば、次のステートメントはオブジェクトを複製するのではなくDOMを実際に操作します。

$('li.list div.city select').last().attr('id', 'cityList_' + (index)); 

は別にあなたの上からいつもここで.attr('id', 'listId_' + (index));

を使用してIDを設定しているコード

var list = $("#olcityList"); 
 

 
//Create clone for initial element 
 
var $li = $('li.list').clone(); 
 

 
$('#plus').click(function() { 
 
    var index = list.find("li").length + 1; 
 
    
 
    //Create clone to manipulate its elements 
 
    var li = $li.clone(); 
 
    li.attr('id', 'listId' + index); 
 
    li.find('.city select').attr('id', 'cityList_' + index); 
 
    li.find('.esta select').attr('id', 'estaList_' + index); 
 
    
 
    //Append 
 
    list.append(li); 
 
}); 
 

 
// Get the select id and its parent id 
 
list.on('click', 'select', function() { 
 
    console.log("parent id: " + $(this).closest('li').attr('id')); 
 
    console.log("Current id: " + $(this).attr('id')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button id="plus" type="button"> +</button> 
 
</div> 
 
<ol id="olcityList"> 
 
    <li class="list" id="listId_1"> 
 
    <div class="city"> 
 
     <select id="cityList_1"></select> 
 
    </div> 
 
    <div class="esta"> 
 
     <select id="estaList_1"></select> 
 
    </div> 
 
    </li> 
 
</ol>