Checkbox within jQuery dialog firing change event but nothing happens

Question

I use a div (wrapper) to generate a form on the fly :

<div id="wrapper"></div>

Then I fill it up in the javascript and turn it into a dialog that display some information and a checkbox list

<div id="formulaire" title="Insérer un nouvel utilisateur">
    <p>Remplir le fomrulaire suivant :</p>
    <label for="user" style="display:inline-block;width:130px;">Utilisateur (WF) : </label><span id="nom"></span><br />
    <label for="mail" style="display:inline-block;width:130px;">Adresse E-mail : </label><span id="prenom"></span><br /><br />
    <label for="permission">L'utilisateur a les permissions suivantes : </label><br />

<ol>
    <li><input type="checkbox" id="Checkbox1" /> Gérer la fréquence des visites</li>
    <li><input type="checkbox" id="Checkbox2" /> Chercher un client sur le serveur</li>
    <ul><li id="Li1"><input type="checkbox" id="Checkbox3" />Télécharger ce client</li></ul>
    <li><input type="checkbox" id="Checkbox4" /> Proposer un prix inférieur au prix minium</li>
    <li><input type="checkbox" id="Checkbox5" /> Créer des &quot;Price Credit Note&quot;</li>
    <li><input type="checkbox" id="Checkbox6" /> Créer des &quot;Quote Approval&quot;</li>
    <li><input type="checkbox" id="Checkbox7" /> Créer des &quot;Price Afreement&quot;</li>
</ol>

    <input type="button" value="Valider"/>
</div>

with the following javascript :

function CreateUser(nom, prenom){
    $("#wrapper").empty();
    $("#wrapper").append()//Here I append the html above

    $("#nom").text(nom);
    $("#prenom").text(prenom);
    $("#Li1").hide();

    $("#Checkbox2").change(function () {
        if (this.checked) {
            $("#Li1").show()
        }
        else {
            $("#Li1").hide()
        }
    });

    $("#formulaire").dialog({
        modal: true,
        width: 450
    });
}

This function is called by a button, The dialog shows up properly but I want the 3rd element (which is a sub list) on the list to appear only if Checkbox2 is checked. The issue is that even though the change event fires, if I close the dialog and open a new one, #Li1 no longer shows or hide, nothing happens when I check/uncheck Checkbox2. Where does the issue come from ?

Answer 1

this keyword represent the current object. as you are using jQuery callback it is better to use it in following manner...

$("#Checkbox2").change(function () {
            if ($(this).attr("checked")) {
                $("#Li1").show()
            }
            else {
                $("#Li1").hide()
            }
        });

You can also check for checkbox in following manner

$(this).is(':checked')

Thanks for the details of step you followed to reproduce this problem. This is better to destroy the dialog so jQuery take proper care of underlying elements as well as associated events. Hence destroy the dialog properly and use $(this) to access source element in event.