Change class of appended element on click function NOT triggered from whithin the appended element

Question

My question is: how do you make add/remove a class to an appended element with a click function that is NOT triggered from whithin the appended element ?

I have a function that adds/ removes class to switch dark <-> light mode and it works fine with all elements that exist when the page loads. If I add an input via.append() and make the switch from dark to ligth mode, the classes of this input are not updated.

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>

My 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>');
 });
});

Event delegation : from what I understand, it would work only if my light/dark mode function was fired from a click within my appended element? Here, basically, the listener is the same, I just want all elements, prev. existing and newly appended, to react to it.

Escaping : I read about escaping the classes of the appended element, but I'm afraid I don't understand how to do that or whether or not it is the good approach.

Also, I'm fairly new to js and jquery altogether, so I know this might not be a good way to implement light/dark mode, but I'm learning a lot by doing it like that. Thanks for the help:)

Answer 1

What you can do is put the current theme in a global variable. Then you can use that variable when you're creating new elements.

Also, you shouldn't set theme when the page is loaded, since it won't be updated when you add new objectes. Use the selector to find all the elements that need their classes changed when you click the buttons.

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