JavaScript没有'；无法在.html（）添加的元素上正常工作

我的JavaScript和jQuery fadeIn（）、html（）和fadeOut（）方法有点问题

下面是我的代码

我的HTML

<div class="fluid-container">
  <div class="row">
    <div class="col text-center">
      <ul class="list-inline pb-6 border-bottom d-inline-block w-75">
        <button class="list-inline-item circle-button mr-3" type="button" name="button">1</button>
        <li class="list-inline-item mr-5">Password</li>
        <button class="list-inline-item circle-button mr-3 grey-btn" type="button" name="button">2</button>
        <li class="list-inline-item half-opacity">Industries</li>
      </ul>
      <br>

        <div id="ReplCont">
          <span class="h5 d-inline-block mt-4 mb-5">Hey there Maxx, welcome to Flairr!<br>To get started, create a password for yourself.</span>
          <br>
          <input class="mb-6 ml-5 mr-3 rounded w-20" type="text" name="password" value="" placeholder="Password" id="pass-input">
          <img class="flairr-tick-resize vis-hidden" src="./img/flairr_tick.svg" alt="Tick images">
          <br>
          <input class="mb-5 ml-5 mr-3 rounded w-20" type="text" name="confirm password" value="" placeholder="Confirm Password" id="conf-pass-input">
          <img class="flairr-tick-resize vis-hidden" src="./img/flairr_tick.svg" alt="Tick images">
          <br>
          <button class="mb-2 half-opacity" type="button" name="button" id="cont-btn">Continue</button>
        </div>

      <div id="empty-bg">
        <!-- Must be empty -->
      </div>
    </div>
  </div>
</div>

1.
密码
2.
行业



嘿，麦克斯，欢迎来到弗莱尔
要开始，请为自己创建密码。






持续

JAVASCRIPT

$(document).ready(function(){
// INDUSTIES BUTTONS
// Toggle active
$('.industry-btn-new').click(function(){
  if ($('.industry-btn-chsen').length >= 3) {
    if ($(this).hasClass('industry-btn-chsen')) {
      $(this).toggleClass('industry-btn-chsen');
    }
  }else {
    $(this).toggleClass('industry-btn-chsen');
  }
})
// Get started button
$('.industry-btn-new').click(function(){
  if ($('.industry-btn-chsen').length >= 3) {
    $('#get-started').removeClass('half-opacity');
  }else if ($('.industry-btn-chsen').length <= 3) {
    $('#get-started').addClass('half-opacity');
  }
})
// INPUTS COMPARISON
$('#conf-pass-input, #pass-input').keyup(function(){
 if ($('#pass-input').val() === $('#conf-pass-input').val() && $('.w-20').val().length >= 1) {
    $('.flairr-tick-resize').removeClass('vis-hidden');
    $('#cont-btn').removeClass('half-opacity');
    $('.w-20').removeClass('red-input');
  }else if ($('#pass-input').val() !== $('#conf-pass-input').val() || $('.w-20').val().length <= 1) {
    $('.flairr-tick-resize').addClass('vis-hidden');
    $('#cont-btn').addClass('half-opacity');
    $('.w-20').removeClass('red-input');
  }
});
// CONTINUE BUTTON ACTIONS
  $('#cont-btn').click(function(){
    if ($('#pass-input').val() !== $('#conf-pass-input').val() || $('.w-20').val().length <= 0) {
    $('.w-20').addClass('red-input');
  }else {
      $('#ReplCont').fadeOut('slow', function() {
         $('#ReplCont').html(`<span class="h5 d-inline-block mt-4 mb-5">Alright Maxx,<br>choose up to 3 industries you're interested in.</span>
      <br>
      <button class="m-2 industry-btn-new" type="button" name="button">Marketing</button>
      <button class="m-2 industry-btn-new" type="button" name="button">Finance</button>
      <button class="m-2 industry-btn-new" type="button" name="button">Business Development</button>
      <button class="m-2 industry-btn-new" type="button" name="button">Engineering</button>
      <br>
      <div class="pb-5 mb-4 border-bottom w-75 text=center mx-auto">
        <button class="m-2 industry-btn-new" type="button" name="button">Design</button>
        <button class="m-2 industry-btn-new" type="button" name="button">Computer Science</button>
        <button class="m-2 industry-btn-new" type="button" name="button">Data Science</button>
      </div>
      <br>
      <button class="mb-2 half-opacity" type="button" name="button" id="get-started">Get started</button>`);
      $('#ReplCont').fadeIn('slow');
    });
   }
 })
})

$（文档）.ready（函数（）{
//工业按钮
//切换激活
$（'.industry btn new'）。单击（函数（）{
如果（$（'.industry btn chsen'）。长度>=3）{
if（$（this）.hasClass（'industry-btn-chsen'））{
$（this.toggleClass（'industry-btn-chsen'）；
}
}否则{
$（this.toggleClass（'industry-btn-chsen'）；
}
})
//开始按钮
$（'.industry btn new'）。单击（函数（）{
如果（$（'.industry btn chsen'）。长度>=3）{
$（“#开始”）.removeClass（“半不透明”）；
}else if（$（'.industry btn chsen'）。长度=1）{
$（'.flairr tick resize'）.removeClass（'vis-hidden'）；
$（'#cont btn'）.removeClass（'half-opacity'）；
$（'.w-20'）.removeClass（'red-input'）；
}else if（$（'#pass input'）.val（）！=$（'#conf pass input'）.val（）| |$（'.w-20'）.val（）.length当JavaScript将HTML添加到DOM中时，它会影响对它的引用。这意味着您的JavaScript正在搜索“旧”HTML而不是“新”HTML

您希望的是将您的点击事件更改为“实时”，就像这样

$(document).on(event, element, function(){
    // Do stuff
});

事件
将是
单击
，
提交
等

element
将是您的元素（id或类等）的选择器。
只添加带有单个HTML的元素而不使用动态元素不是更好吗？我的意思是什么对性能更有利，或者它实际上无关紧要？由
.HTML（）添加的元素
是在此上下文中动态添加的元素，意味着在运行时通过代码添加的元素。非常感谢您快速且非常好的回答！谢谢您，先生！