Question

使用jQuery的.on()委托事件，由于动态创建的链接，我发现自己在使用点击元素的$(this)引用时遇到了问题。

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>';
    }
}

我只是想做的是显示下一个表格是否有。（我可以在一个页面中拥有超过2个表单）问题是我绝对不会对$(this)做任何事情（例如，选择下一个表格例如......）

我似乎无法理解为什么它不起作用，任何人都可以启发我？

https://jsfiddle.net/y453y67o/9/（有些事情可能看起来很奇怪而且没有用，只是试图删除所有无用的东西）

Answer 1

插入HTML后最终得到的标记类似于

<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>

注意表单是如何关闭到锚点旁边的，它实际上是一个包含.nextQ元素的父元素，所以你可能想要的是closest()而不是

$(".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

由于委托事件目标（即，您绑定到元素但想要查看子元素），请尝试使用using event.target，此外.closest()可让您找到最接近的父元素类型 -

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

jquery .on（）委托事件，无法使用$（this）访问任何内容

2 个答案: