Question

我有一个由jQuery加载的表元素，在我的表的每一行上都有一个隐藏的输入元素，还有一个用于打开弹出窗口的按钮。

我的问题是当我在单击按钮时尝试获取隐藏输入的值时，我没有得到值，它显示undefined（我使用了jQuery函数来获取单击的值按钮的事件）

// function to get the hidden input value
$(document).on("click", '#registerhere', function(event) {                 
  var id = $(this).find('#gameid').val();
  console.log(id);
  alert(id);
  $colinforeg = $('#exampleModal');
  $colinforeg.modal('show');
});

// ajax function to load the table
$.ajax({
  url: 'allevents.php',
  dataType: 'json',
  type: 'post',   
  success: function(data, textStatus, jQxhr) {
    console.log(data);

    $.each(data, function (i, item) {
      console.log(item[0]);
      var events = '<tr>';
      events += '<td>'+item[1]+'</td>';
      events += '<td>'+item[4]+'</td>';
      events += '<td>'+item[5]+'</td>';
      events += '<td>'+item[6]+'</td>';
      events += '<td>'+item[2]+'</td>';
      events += '<td>';
      events += '<button type="button" class="btn btn-primary" id="registerhere"> Register Here';
      events += '</button>';
      events += '<input type="hidden" id="gameid" value="'+item[0]+'">';
      events += '</td>';
      events += '</tr>';
      $('#events').append(events);
    });
  },

Answer 1

首先，您在每个附加行中重复相同的id属性，这些属性无效。如果要对常用元素进行分组，请改用类。

关于DOM遍历问题，请注意#gameid元素不是button的孩子，因此find()不会在那里工作。您可以改为closest('tr')并从那里使用find()：

＆＃13;

// function to get the hidden input value
$(document).on("click", '.registerhere', function(e) {
  var id = $(this).closest('tr').find('.gameid').val();
  console.log(id);

  // work with your modal here...
});

// ajax function to load the table
var events = '<tr>';
events += '<td>';
events += '<button type="button" class="btn btn-primary registerhere">Register Here</button>';
events += '<input type="hidden" class="gameid" value="foo">';
events += '</td>';
events += '</tr>';
$('#events').append(events);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tbody id="events"></tbody>
</table>

＆＃13;

遍历隐藏的输入元素并获取其值

1 个答案: