單擊 function 更改附加元素的 class 未從附加元素中觸發

Question

我的問題是：如何通過單擊 function 將 class 添加/刪除到附加元素，這不是從附加元素中觸發的？

我有一個 function 添加/刪除 class 以切換暗 <-> 亮模式，它適用於頁面加載時存在的所有元素。 如果我通過.append() 添加輸入並從暗模式切換到亮模式，則此輸入的類不會更新。

HMTL：

<!--Toggle Light/dark mode-->
<div class="row m-1 justify-content-end">
    <div class="col-3 text-left text-md-center input-group justify-content-end">
        <div class="input-group btn-group btn-group-toggle justify-content-end" data-toggle="buttons">
            <label class="btn swMode swDark">
                <input type="radio" name="options" class="btn" value="dk" id="dk">&#9789;
            </label>
            <label class="btn swMode swLight">
                <input type="radio" name="options" class="btn" value="lt" id="lt">&#9788;
            </label>
        </div>
    </div>
</div>

<!--Button for adding inputs-->
<div class="row my-3 text-left justify-content-lg-center">
    <div class="col-xs-12 col-lg-6 my-2">
        <button class="btn theme-mode dark" id="addObj" type="button">&#43; Add Objective</button>
    </div>
</div>

我的 javascript：

$(document).ready(function() {
var theme=$('.theme-mode');
    $('.swDark').on('click', function (){
        theme.addClass('dark').removeClass('light');            
    };

    $('.swLight').on('click',function (){
        theme.addClass('light').removeClass('dark');
    };
$('#addObj').click(function () {
countObj=$('.objective').length;
countObj++;

 $('#addObjectives').append('<div class="row my-3 text-left justify-content-lg-center " id="obj'+countObj+'"><div class="col-xs-12 col-lg-3 my-2"><select name="obj'+countObj+'" required class="theme-mode dark"><option class="theme-mode dark" value="plsSelect">--Select Objective '+countObj+'--</option><option class="theme-mode dark" value="option1">Option 1</option></select></div><div class="col-xs-12 col-lg-3 my-2"><input class="theme-mode dark obj"  obj" name="objN'+countObj+'" type="number" required placeholder="Numbered Objective '+countObj+'"></div></div>');
 });
});

事件委托：據我了解，只有在我的附加元素中單擊觸發我的亮/暗模式 function 時它才會起作用？ 在這里，基本上，聽者是一樣的，我只想要所有元素，prev。 現有的和新附加的，以對其做出反應。

Escaping ：我閱讀了有關 escaping 附加元素的類，但恐怕我不明白如何做到這一點，或者它是否是好方法。

另外，我對 js 和 jquery 完全陌生，所以我知道這可能不是實現明暗模式的好方法，但我通過這樣做學到了很多東西。 謝謝您的幫助：）

Answer 1

您可以做的是將當前主題放在全局變量中。 然后，您可以在創建新元素時使用該變量。

此外，您不應在頁面加載時設置theme ，因為添加新對象時它不會更新。 當您單擊按鈕時，使用選擇器查找所有需要更改其類的元素。

 $(document).ready(function() { var current_mode = "dark"; $('.swDark').on('click', function() { $(".theme-mode").addClass('dark').removeClass('light'); current_mode = 'dark'; }); $('.swLight').on('click', function() { $(".theme-mode").addClass('light').removeClass('dark'); current_mode = 'light'; }); $('#addObj').click(function() { countObj = $('.objective').length; countObj++; $('#addObjectives').append(`<div class="row my-3 text-left justify-content-lg-center " id="obj' + countObj + '"><div class="col-xs-12 col-lg-3 my-2"><select name="obj' + countObj + '" required class="theme-mode ${current_mode}"><option class="theme-mode ${current_mode}" value="plsSelect">--Select Objective ' + countObj + '--</option><option class="theme-mode ${current_mode}" value="option1">Option 1</option></select></div><div class="col-xs-12 col-lg-3 my-2"><input class="theme-mode ${current_mode} obj" obj" name="objN' + countObj + '" type="number" required placeholder="Numbered Objective ' + countObj + '"></div></div>`); }); });

 .dark { background-color: darkgrey; color: white; }.light { background-color: white; color: darkgrey; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <;--Toggle Light/dark mode--> <div class="row m-1 justify-content-end"> <div class="col-3 text-left text-md-center input-group justify-content-end"> <div class="input-group btn-group btn-group-toggle justify-content-end" data-toggle="buttons"> <label class="btn swMode swDark"> <input type="radio" name="options" class="btn" value="dk" id="dk">&#9789; </label> <label class="btn swMode swLight"> <input type="radio" name="options" class="btn" value="lt" id="lt">&#9788; </label> </div> </div> </div> <:--Button for adding inputs--> <div class="row my-3 text-left justify-content-lg-center"> <div class="col-xs-12 col-lg-6 my-2"> <button class="btn theme-mode dark" id="addObj" type="button">&#43; Add Objective</button> </div> </div> <p> Objectives: <div id="addObjectives"></div>