javascript - jquery .on() delegated event, can't access anything using $(this) -

using .on() delegated event of jquery, because of dynamically created link, found myself having trouble using $(this) reference of element clicked.

html

<div class="container">             <form                  id="form1"                  action=""                  method="post"                  style=""             >                 <h3><b>cc</b></h3>                             <input type="radio" name="simple" /> ccca                                             <input type="radio" name="simple" /> cccb                         <br />                 <p style="display:none;"></p>                 <input class="formsubmit" type="submit" value="repondre" />             <hr />             </form>                 <form                  id="form2"                  action=""                  method="post"                  style="display:none;"             >                 <h3><b>cc</b></h3>                             <input type="radio" name="simple" /> ccca                                             <input type="radio" name="simple" /> cccb                         <br />                 <p style="display:none;"></p>                 <input class="formsubmit" type="submit" value="repondre" />             <hr />             </form> </div> 

js

$(document).ready(function() {      $('.formsubmit').click(function(e) {         e.preventdefault();         var form = $(this).parent('form');         manageresponse.result(true, form);     });      $(".container").on('click', '.nextq', function(e) {         console.log($(this));         console.log($(this).next('form')) // prints nothing?...     });  });      var manageresponse = {     result: function(result, form) {         $resultfield = form.find('p');         $resultfield.show();         $resultfield.html(result === true ? '<span style="color:green"> </span>' : '<span style="color:red">false </span>');         form.find('.formsubmit').hide();         console.log(form.next('form'));         (typeof(form.next('form') !== undefined)) ? $resultfield.append('<p><a class="nextq" href="#">next ?</a></p>') : '<p class="willsee">over !</p>';     } } 

what trying show next form there any. (i can have way more 2 forms in single page) problem can absolutely nothing off of $(this) (like, select next form exemple...)

i can't seem understand why it's not working, enlighten me ?

https://jsfiddle.net/y453y67o/9/ (some things may weird , unsued, tried remove useless things)

the markup end after inserting html like

<form id="form1" action="" method="post" style="">     <h3><b>cc</b></h3>     <p style="" id="result_question_{{ question.id }}">         <span style="color:green"> </span>         <p><a class="nextq" href="#">next ?</a></p>     </p> </form> 

note how form isn't closing being next anchor, in fact parent element containing .nextq element, want closest() instead

$(".container").on('click', '.nextq', function(e) {     console.log($(this));      var forms   = $('form');     var current = $(this).closest('form');      var next    = forms.eq( forms.index(current) + 1 );      console.log(next) // prints next form }); 

fiddle