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

Posted 2023-05-09

【中文标题】单击 Jquery 中的按钮从动态生成的元素中获取数据

【英文标题】：Getting data from dynamically generated element at the click of a button in Jquery

【发布时间】：2015-11-07 06:57:18

【问题描述】：

我正在尝试通过单击按钮从动态创建的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'));
        );

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

【问题讨论】：

您确定您使用的data() 正确吗？

你用过this.id吗？

你看到'createclass button clicked'了吗？

这不是一个答案，但是，您可能还有另一个大问题。据我了解，您生成了不止一个attendee。然后，您有很多 ID 为 btn-deleteattendee 的按钮。如果是，那肯定是错的。

【参考方案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>

【讨论】：

这成功了！非常感谢您指出我的元素中没有任何数据。