Jquery 点击追加不起作用

Question

我正在尝试使用 JQuery .click 我附加的 div，但点击根本不起作用。这是代码，我已经尝试了我可以在互联网上找到的其他教程的帮助，但它没有用。

这里是 jquery（非常简单的版本）：

$(document).ready(function() {
$( "#DivResult" ).click(function() {

    alert('yolo');
 //$( "#return" ).submit();
});
});

以及我使用 Ajax 创建 DivResult 并附加的方式：

$(document).ready(function () {
    $('#monForm').on('submit', function (e) {
        e.preventDefault();
        var $this = $(this);
        var adrall = $('#villeDepart').val();
        var adrarr = $('#villeArrivee').val();
        var datedepart = $('#datedepart').val();
        var nombreplace = $('#nombreplace').val();
        $.getJSON('/app.php/rechT/refresh', {data: adrall + ' , ' + adrarr + ' , ' + datedepart + ' , ' + nombreplace}
        ).done(function (Res) {
            console.log(Res);
            $("#resultcontainer").html("");
            if (Res == "") {
                secondchoix();
                tiercechoix();
            }
            else {
                $.each(Res, function (ligne, result) {
                    var resultats =
                            "<div class=" + '"output container col-lg-8 blueskycont col-lg-offset-2"' + ' id="DivResult"'+ 
                            ">" + " <form name=" + '"retour"' + " action=" +
                            '"/app.php/validationdemande/go"' + "role=" + '"form"' + " method=" + '"POST"' + " class=" + '"retour"' + ' id="return"'+
                            "> <div class=" + '"form-group col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + ">" +
                            "<label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12 move"' + " for=" + '"pwababd"' + ">" + result.TRAJ_LIEU_DEP + " -> " + result.TRAJ_LIEU_ARR + "</label>" +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> Départ le : " + result.TRAJ_DATE + "</label> " +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> De : " + result.PROT_LIEU_DEP + "</label> " + "</br>" +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> " + result.PROT_LIEU_ARR + "</label> " + "</br>" +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> A : " + result.TRAJ_NB_PLACE + " places restante(s) </label> " + "</br>" +
                            "<label class=" + '"funzies col-lg-2 col-md-2 col-xs-sm-2 col-xs-2"' + "> " + result.PROF_PRENOM + " " + result.PROF_NOM + " </label> " +
                            "<input type=" + '"HIDDEN" class="" id="" name="PROT_ID" value="' + result.PROT_ID + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="PROT_RED" value="' + result.PROT_RED + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="TRAJ_TYPE" value="' + result.TRAJ_TYPE + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="VILLE_DEP" value="' + result.TRAJ_LIEU_DEP + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="VILLE_ARR" value="' + result.TRAJ_LIEU_ARR + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="LIEU_DEP" value="' + result.PROT_LIEU_DEP + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="LIEU_ARR" value="' + result.PROT_LIEU_ARR + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="nombreplace" value="' + nombreplace + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="demande_ville_dep" value="' + adrall + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="demande_ville_arr" value="' + adrarr + '">' +
                            "</div>  </form> </div>";

                    $("#resultcontainer").append(
                            resultats
                            );
                });
            }
        })
                .fail(function (Res) {
                    alert('fail');          
                })
                .error(function (Res) {
                    alert('erreur');
                });
    });
});

我正在尝试使用它来提交，因为 : onClick="document.forms[\'retour\'].submit();" 不适用于 IE。

但是clic在DivResult上根本没有响应。这是否意味着我不能在我附加的 div 上使用 Jquery.click？

Answer 1

您需要事件委托！

$("#resultcontainer").on("click", "#DivResult", function() {

});

处理程序在运行时绑定 - 因为那时您的元素不存在，所以没有处理程序被绑定。这将检查 #resultcontainer 每次点击是否找到 #DivResult 和运行处理程序。

Answer 2

尝试在大结果函数的底部添加 yolo 部分。我的理论是，当您调用 'onclick':

时，您的 DivResult 尚不存在

$(document).ready(function () {
    $('#monForm').on('submit', function (e) {
        e.preventDefault();
        var $this = $(this);
        var adrall = $('#villeDepart').val();
        var adrarr = $('#villeArrivee').val();
        var datedepart = $('#datedepart').val();
        var nombreplace = $('#nombreplace').val();
        $.getJSON('/app.php/rechT/refresh', {data: adrall + ' , ' + adrarr + ' , ' + datedepart + ' , ' + nombreplace}
        ).done(function (Res) {
            console.log(Res);
            $("#resultcontainer").html("");
            if (Res == "") {
                secondchoix();
                tiercechoix();
            }
            else {
                $.each(Res, function (ligne, result) {
                    var resultats =
                            "<div class=" + '"output container col-lg-8 blueskycont col-lg-offset-2"' + ' id="DivResult"'+ 
                            ">" + " <form name=" + '"retour"' + " action=" +
                            '"/app.php/validationdemande/go"' + "role=" + '"form"' + " method=" + '"POST"' + " class=" + '"retour"' + ' id="return"'+
                            "> <div class=" + '"form-group col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + ">" +
                            "<label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12 move"' + " for=" + '"pwababd"' + ">" + result.TRAJ_LIEU_DEP + " -> " + result.TRAJ_LIEU_ARR + "</label>" +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> Départ le : " + result.TRAJ_DATE + "</label> " +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> De : " + result.PROT_LIEU_DEP + "</label> " + "</br>" +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> " + result.PROT_LIEU_ARR + "</label> " + "</br>" +
                            " <label class=" + '"funzies col-lg-12 col-md-12 col-xs-sm-12 col-xs-12"' + "> A : " + result.TRAJ_NB_PLACE + " places restante(s) </label> " + "</br>" +
                            "<label class=" + '"funzies col-lg-2 col-md-2 col-xs-sm-2 col-xs-2"' + "> " + result.PROF_PRENOM + " " + result.PROF_NOM + " </label> " +
                            "<input type=" + '"HIDDEN" class="" id="" name="PROT_ID" value="' + result.PROT_ID + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="PROT_RED" value="' + result.PROT_RED + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="TRAJ_TYPE" value="' + result.TRAJ_TYPE + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="VILLE_DEP" value="' + result.TRAJ_LIEU_DEP + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="VILLE_ARR" value="' + result.TRAJ_LIEU_ARR + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="LIEU_DEP" value="' + result.PROT_LIEU_DEP + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="LIEU_ARR" value="' + result.PROT_LIEU_ARR + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="nombreplace" value="' + nombreplace + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="demande_ville_dep" value="' + adrall + '">' +
                            "<input type=" + '"HIDDEN" class="" id="" name="demande_ville_arr" value="' + adrarr + '">' +
                            "</div>  </form> </div>";

                    $("#resultcontainer").append(
                            resultats
                            );
                });
            }
        })
                .fail(function (Res) {
                    alert('fail');          
                })
                .error(function (Res) {
                    alert('erreur');
                });
    });

    $( "#DivResult" ).click(function() {
        alert('yolo');
 //$( "#return" ).submit();
    });
});

Jquery 点击追加不起作用

Jquery click doesn't work on append

jquery

append

click

onclick