Изменить класс добавляемого элемента при функции щелчка, НЕ запускаемой внутри добавленного элемента - PullRequest
Новая
       80

Изменить класс добавляемого элемента при функции щелчка, НЕ запускаемой внутри добавленного элемента

0 голосов
/ 20 июня 2020

Мой вопрос: как сделать добавление / удаление класса к добавленному элементу с помощью функции щелчка, которая НЕ запускается внутри добавленного элемента ?

У меня есть функция который добавляет / удаляет класс для переключения режима dark <-> light и отлично работает со всеми элементами, которые существуют при загрузке страницы. Если я добавляю ввод через .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>

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

Делегирование событий : насколько я понимаю, это будет работать, только если моя функция светлого / темного режима была запущена щелчком внутри моего добавленного элемента? Здесь в основном слушатель тот же, просто хочу все элементы, пред. существующий и недавно добавленный, чтобы отреагировать на него.

Escaping : я читал об экранировании классов добавленного элемента, но, боюсь, я не понимаю, как это сделать или является ли это хорошим подходом.

Кроме того, я новичок в js и jquery в целом, поэтому я знаю, что это может быть не очень хороший способ реализовать светлый / темный режим, но Я многому учусь, делая это таким образом. Спасибо за помощь :)

1 Ответ

0 голосов
/ 20 июня 2020

Что вы можете сделать, так это поместить текущую тему в глобальную переменную. Затем вы можете использовать эту переменную при создании новых элементов.

Кроме того, вы не должны устанавливать 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>
...