代码之家 › 专栏 › 技术社区 › qts

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

jquery-events jquery-selectors jquery

qts · 技术社区 · 9 年前

我正在尝试从动态创建的 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'));
        });

但这也行不通。非常感谢您的帮助

1 回复 | 直到 9 年前

Arun P Johny 9 年前

您需要在 attendees 具有 data-id 属性

您正在尝试获取 数据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>