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

Question

Using the .on() delegated event of jQuery, because of a dynamically created link, I found myself having trouble using the $(this) reference of the 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"> good </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 I am simply trying to do is to show the next form is there is any. (I can have way more than 2 forms in a single page) Problem is that I can absolutely do nothing off of $(this) (like, select the next form for exemple...)

I can't seem to understand why it's not working, anyone could enlighten me ?

https://jsfiddle.net/y453y67o/9/ (some things may look weird and unsued, just tried to remove all the useless things)

Answer 1

The markup you end up with after inserting the HTML is something like

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

Note how the form isn't even closing to being next to the anchor, it is in fact a parent element containing the .nextQ element, so what you probably want is 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 the next form
});

FIDDLE

Answer 2

Because of the delegated event target (ie, you're binding to an element but wanting to look at a child element) try using event.target instead, in addition .closest() lets you find the closest parent element of a type -

$(".container").on('click', '.nextQ', function(e) 
    console.log($(e.target));
    console.log($(e.target).closest('form').next('form'))
});