更改未从附加元素内触发的单击功能上的附加元素类

Question

我的问题是：如何使用不会从附加元素中触发的单击功能向附加元素添加/删除类？

我有一个添加/删除类以切换暗 亮模式的功能，它适用于页面加载时存在的所有元素。如果我通过 .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>');
 });
});

事件委托：据我了解，只有在我的附加元素中单击触发我的亮/暗模式功能时，它才会起作用？在这里，基本上，听者是一样的，我只想要所有元素，prev。现有的和新附加的，对它做出反应。

转义：我读过关于转义附加元素的类，但恐怕我不明白如何做到这一点，或者它是否是好方法。

另外，我对 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>