Question

我正在使用javascript创建表格，但是当我点击表格td时我卡住了，在jquery中获取动态td文本值而不使用for循环/每个

function table_form(day, month, year) {
  var tr = '';
  var table = '<table id="tbl" border="1px"><thead><tr><th><</th><th>Mar</th><th>></th><th></th><th><</th><th>2016</th><th>></th></tr><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>';
  //~ dynamic_date_form(2,2016);
  var tr_inc = 0;
  for (var i = 0; i < 5; i++) {
    tr += '<tr>';
    for (var j = 0; j < 7; j++) {
      tr_inc++;
      tr += '<td id="id_' + tr_inc + '">' + tr_inc + '';
    }
  }
  tr += '</tr>';
  tr_inc++;
  return table += tr;
}

$(document).ready(function() {
  $("#date_id").one("click", function() {
    this.insertAdjacentHTML("afterEnd", "<div id='lbl_date'></div>");
    $('#lbl_date').html(table_form(1, 1, 1));
  });
  
  $('#tbl').click(function() {
    alert($(this).text());
  });
});

#lbl_date{
    position: absolute;
    background-color:#FFAA41;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="text"  id="date_id" class="date" />
<label for="lbl_date">date</label>

Answer 1

动态生成的元素需要event delegation，如下所示。

$(document).on('click', '#tbl td',function(){
    alert($(this).text());
});

当我点击td时，在jquery中获取td文本动态

1 个答案: