单击 Jquery 中的按钮从动态生成的元素中获取数据

Question

我正在尝试通过单击按钮从动态创建的element 中检索数据。

生成元素的脚本是：

$('.dropdown-menu li a').click(function(){

        var $this = $(this);
        var dropdownid = $(this).data('value');
        var surname=$(this).data('surname');
        var middlename=$(this).data('middlename');
        var firstname=$(this).data('firstname');
        var attendees=$(this).data('attendees');

        $('.attendees').append('<div class='+dropdownid+'>'+firstname+' '+middlename+' '+surname+'</div>'+'<button class='+dropdownid+' id=btn-deleteattendee data-id='+dropdownid+' class=remove>X</button>');
    });

单击按钮时检索数据的脚本是：

$(document).on('click','#btn-createclass',function(){
        $('.attendees').each(function(result){
            console.log('attendees: ',result)
        });

但是控制台正在打印这个：

attendees: undefined

我也试过这个：

$('.attendees').on('click','#btn-createclass',function(event){
        console.log('createclass button clicked');
        event.preventDefault();
        var $this = $(this);
        $('.attendees').each(function(event){
            console.log('result ',$(this).data('id'));
        });

但这也不起作用。 非常感谢任何帮助

Answer 1

您需要遍历具有data-id 属性的attendees 元素中的按钮元素。

您正试图从不具有该值的 attendees 元素中获取 data-id 值

$('.dropdown-menu li a').click(function() {

  var $this = $(this);
  var dropdownid = $(this).data('value');
  var surname = $(this).data('surname');
  var middlename = $(this).data('middlename');
  var firstname = $(this).data('firstname');
  var attendees = $(this).data('attendees');

  $('.attendees').append('<div class=' + dropdownid + '>' + firstname + ' ' + middlename + ' ' + surname + '</div>' + '<button class=' + dropdownid + ' id=btn-deleteattendee data-id=' + dropdownid + ' class=remove>X</button>');
});


$(document).on('click', '#btn-createclass', function(event) {
  event.preventDefault();
  var $this = $(this);
  $('.attendees [data-id]').each(function(event) {
    console.log('result', $(this).data('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="dropdown-menu">
  <li><a data-value="1" data-surname="s1" data-middlename="m1" data-firstname="f1" data-attendees="a1">1</a></li>
  <li><a data-value="2" data-surname="s2" data-middlename="m2" data-firstname="f2" data-attendees="a2">2</a></li>
  <li><a data-value="3" data-surname="s3" data-middlename="m3" data-firstname="f3" data-attendees="a3">3</a></li>
  <li><a data-value="4" data-surname="s4" data-middlename="m4" data-firstname="f4" data-attendees="a4">4</a></li>
</ul>
<div class="attendees"></div>
<button id="btn-createclass">Create</button>