Event delegate issue for dynamically added element in jquery

Answer 1

Try this

$(document).on('change','.check-input',function(){
    $(this).next().text('Error');
 });

DEMO

Answer 2

You are misunderstanding event delegation. Event delegation is done with the closest div. Here I have used document but you can use the closest div to use it as event delegation.

Use this:

$(document).on('change','.check-input',function(){
    $(this).next().text('Error');
 });

demo

---

here's the link to understand about the event delegation

Example:

// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

Answer 3

You need to assign the on handler against an ancestor element, for example the document element. Then you can specify the exact selector for the element to listen for as the second parameter:

$(document).on('change', '.check-input', function () {
    $(this).next().text('Error');
});

This basically means: Listen for the change event for all .check-input elements that are descendants of the document element.

Here is a working example