Получить идентификаторы данных LI из динамического содержимого

Question

Я пытаюсь получить самые близкие элементы UL, а затем идентификатор данных LI, но кнопка ничего не делает, никаких ошибок, что говорит о том, что он не находит элементы.

Целью этого является то, что пользователь вводит количество фургонов, доступных в течение дня, а затем перетаскивайте каждую доставку под каждый фургон. Затем пользователь нажимает на создание листа данных, и он будет печатать PDF для этих элементов только в назначенном фургоне.

На данный момент мне нужен только созданный листок, чтобы предупредить идентификаторы данных, чтобы я мог передать их AJAX.

$(function() { 
    $('#vans').on('input', function() { 
    vansDo(); 
    doMap(); 
    }); 

    function vansDo() { 
    var vans = $('#vans').val(); 
    var drops = $("#placeVans").html('<br /><p class="text-center">Drag each booking onto the required vehicle. Move each booking into delivery position. Then print off drop sheets for each vehicle.</p>'); 
    if (vans >= '1') { 
     for (i = 1; i <= vans; i++) { 
     drops = $("#placeVans").html(); 
     $("#placeVans").html(drops + '<div id="van' + i + '" class="col-lg-4"><h3 class="align-center"><i class="fa fa-truck"></i> Van ' + i + '</h3><ul id="sortable2" class="droptrue c-white bg-gray"></ul><a data-toggle="modal" data-id="' + i + '" data-target="#modal-map" class="btn btn-primary m-t-10 m-r-10"><i class="fa fa-map-marker"></i> View Map</a><a class="dropsheet btn btn-primary m-t-10"><i class="fa fa-file-pdf-o"></i> Create Dropsheet</a></div>'); 
     }; 
    } else { 
     $("#placeVans").html(drops_default); 
    } 
    sortinit(); 
    $("#sortable1").html(cache).sortable("refresh"); 
    $("#sortable2").disableSelection(); 
    } 

    $('#placeVans').on('click', '.dropsheet', function() { 
    $(this).closest('ul').find('li').each(function() { 
     alert($(this).data('id')); 
    }); 
    }); 
}); 

<ul id="sortable1" class="droptrue"> 
    <li data-id="1" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">1</li> 
    <li data-id="2" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">2</li> 
    <li data-id="3" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">3</li> 
    <li data-id="4" class="sortable col-md-12 m-b-10 p-t-10 p-b-10 bd-3 bg-opacity-20 fade in">4</li> 
</ul> 


<div id="placeVans" class="row m-b-20"></div> 

Так я нужна следующая часть для работы, LI тащится от sortable1 к sortable2.

$('#placeVans').on('click', '.dropsheet', function() { 
    $(this).closest('ul').find('li').each(function() { 
     alert($(this).data('id')); 
    }); 
    }); 

Answer 1

ваш a элемент, а именно: кнопка не внутри ul тега. Таким образом, ваш $(this).closest('ul') не будет работать. Но ul обернут под тем же родителем, что и тег a, чтобы вы могли это сделать.

$('#placeVans').on('click', '.dropsheet', function() { 
    $(this).parent().find('ul.droptrue').find('li').each(function() { 
     alert($(this).data('id')); 
    }); 
    }); 

изменение есть в этой части $(this).parent().find('ul.droptrue').

Также с вашего кода. $("#placeVans").html(..... нет li теги внутри вашего ul. здесь <ul id="sortable2" class="droptrue c-white bg-gray"></ul> Не уверен, что это намеренно. Просто указывая.

Answer 2

ul не является предком button, а это родственный так

$('#placeVans').on('click', '.dropsheet', function() { 
    //$(this).closest('div').find('ul li').each(function() {}) 
    $(this).siblings('ul').find('li').each(function() { 
     alert($(this).data('id')) 
    }) 
    });