jQuery last-child selector not “refreshing”

Question

On the last textarea box on the page a function is called to insert another textarea box. Making it the new last textarea, however jQuery does not see this textarea being the new last textarea.

The function sticks on the last textarea that was inserted via 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

This is a one-time selector. In order to get it to dynamically update, you need to use event delegation .

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