Jquery click doesn't work on append

Question

I'm trying to use the JQuery .click on a div that i append, but the click doesn't work at all. here is the code, i already tried the help from the other Tutorials i could find on the internet but it didn't work.

here is the jquery (very simple version) :

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

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

And the way i create my DivResult with Ajax and append :

$(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 =
                            "" + "  " +
                            "" + result.TRAJ_LIEU_DEP + " -> " + result.TRAJ_LIEU_ARR + "" +
                            "  Départ le : " + result.TRAJ_DATE + " " +
                            "  De : " + result.PROT_LIEU_DEP + " " + "
" +
                            "  " + result.PROT_LIEU_ARR + " " + "
" +
                            "  A : " + result.TRAJ_NB_PLACE + " places restante(s)  " + "
" +
                            " " + result.PROF_PRENOM + " " + result.PROF_NOM + "  " +
                            "' +
                            "' +
                            "' +
                            "' +
                            "' +
                            "' +
                            "' +
                            "' +
                            "' +
                            "' +
                            "
  
 ";

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

I'm trying to use it to submit since : onClick="document.forms[\'retour\'].submit();" doesn't work on IE.

But the clic does not respond at all on the DivResult. Does it mean i can't use a Jquery.click on a div that I append?

tymeJV · Accepted Answer

You need event delegation!

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

});

Handlers are bound at runtime - and since your elements don't exist then, no handlers are bound. This will check #resultcontainer each click for the #DivResult and run the handler if found.

Jquery click doesn't work on append

Answers (2)

Related Questions

Jquery click doesn&#39;t work on append

Answers (2)

Related Questions

Jquery click doesn't work on append