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