单击函数更改 class 附加元素未从附加元素内触发

Question

我的问题是：你如何使 add/remove 成为一个 class 到一个带有点击功能的附加元素 ?

我有一个功能可以添加/删除 class 以切换暗 <-> 亮模式，它可以很好地处理页面加载时存在的所有元素。如果我通过 .append() 添加输入并从暗模式切换到亮模式，则此输入的 classes 不会更新。

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

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

转义：我读到有关转义附加元素的 classes 的内容，但恐怕我不明白该怎么做，或者是否这不是好方法。

此外，我对 js 和 jquery 还很陌生，所以我知道这可能不是实现 light/dark 模式的好方法，但我通过实践学到了很多东西就是这样。感谢您的帮助:)

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>

单击函数更改 class 附加元素未从附加元素内触发

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

javascript

jquery

delegates

append

click