javascript - jQuery last-child 选择器不是 "refreshing"

Question

在页面的最后一个文本框上，调用了一个函数来插入另一个文本框。使它成为新的最后一个文本区域，但是 jQuery 看不到这个文本区域是新的最后一个文本区域。

该函数停留在通过 html 插入的最后一个文本区域上。

function add_new() {
  $('.edit_main').append('<li><div class="edit_one"><textarea class="text1"></textarea></div><div class="edit_two"><textarea class="text2"></textarea><textarea class="text3"></textarea></div><div style="clear:both;"></div></li>');
}

$(".edit_main li:last-child div.edit_two textarea:last-child").keydown(function(e) {
  var code = e.keyCode || e.which;
  if (code == 9) {
    add_new();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="edit_main">
  <li>
    <div class="edit_one">
      <textarea class="text1"></textarea>
    </div>
    <div class="edit_two">
      <textarea class="text2"></textarea>
      <textarea class="text3"></textarea>
    </div>
    <div style="clear:both;"></div>
  </li>
  <li>
    <div class="edit_one">
      <textarea class="text1"></textarea>
    </div>
    <div class="edit_two">
      <textarea class="text2"></textarea>
      <textarea class="text3"></textarea>
    </div>
    <div style="clear:both;"></div>
  </li>

</ol>

jsfiddle

Answer 1

这是一次性选择器。为了让它动态更新，你需要使用 event delegation .

$(document).on("keydown", ".edit_main li:last-child div.edit_two textarea:last-child", function (e) {
  if (e.which == 9){
    add_card();
  }
});