jQuery對話框中的復選框觸發更改事件，但沒有任何反應

Question

我使用div（包裝器）動態生成表單：

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

然后，將其填充到javascript中，然后將其變成一個顯示一些信息和復選框列表的對話框

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

使用以下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
    });
}

此功能由一個按鈕調用，該對話框會正確顯示，但我希望僅在選中Checkbox2的情況下，列表中的第3個元素（這是子列表）才會出現。 問題是，即使觸發了更改事件，如果我關閉對話框並打開一個新對話框，＃Li1也不再顯示或隱藏，當我選中/取消選中Checkbox2時什么也不會發生。 問題是從哪里來的？

Answer 1

此關鍵字表示當前對象。 當您使用jQuery回調時，最好以以下方式使用它...

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

您也可以按照以下方式檢查復選框

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

感謝您遵循步驟以重現此問題的詳細信息。 最好銷毀對話框，以便jQuery適當照顧基礎元素以及相關事件。 因此，請正確銷毀對話框，並在事件中使用$(this)訪問源元素。