警告输入值给出未定义

Question

This HTML is dynamically appended on button click. The input value is being returned undefined in the input event handler. Why is this happening?

html += '<div class="div-table-col-unit"> <input type="text"/></div>';

$(document).on('input', '.div-table-col-unit', function(event) {
  alert(this.value);
});

Answer 1

You attached the input event to the div element; they do not have a value to read. You need to bind the event directly to the input instead:

 let html = '<p>Foo</p>'; html += '<div class="div-table-col-unit"> <input type="text" /></div>'; $('body').append(html); $(document).on('input', '.div-table-col-unit input', function(event) { console.log(this.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Alternatively you can retain the binding to the div , but use the target property of the event to reference the element that actually originated the input event:

 let html = '<p>Foo</p>'; html += '<div class="div-table-col-unit"> <input type="text" /></div>'; $('body').append(html); $(document).on('input', '.div-table-col-unit', function(event) { console.log(event.target.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>