Question

I am adding some html to the DOM after the document has loaded via jQuery (and a follow-up to this but not that relavant how to access outside selector in this example). I would like to bind a ‘keyup’ to input elements that are wrapped in class ‘.item-vals’. My understanding is that the first syntax should limit the testing by jQuery for that event to only elements that exist in the class ‘.item-vals’. Since ‘.item-vals’ would be more specific, I think it would perform better than using document. Is there a way to make the second syntax work?

// doesn't work
$('.item-vals').on('keyup','input',function(){

// does work
$(document).on('keyup','.item-vals input',function(){

thx in advance (and sorry for all jQuery questions)

Answer 1

.live is deprecated. Don’t use it.

Instead of document use a container div so that the event doesn`t have to bubble to the top.

$('#MyContainerThatExistsOnPageLoad').on('keyup','.item-vals input',function(){