Question

我的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>

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

当我单击继续按钮时，我用ID ReplCont替换了DIV中的内容。问题是我替换了ReplCont DIV中的内容后，我的新内容JS不起作用。但是，如果我手动将其放下并刷新页面，则JS可以正常工作。

我有一些想法。也许JS会在页面加载时加载，并在使用jQuery设置新HTML之后必须以某种方式重新加载JS。但是我不确定。请帮助朋友！

提前谢谢！

Answer 1

当JavaScript将HTML添加到DOM时，它将影响对其的引用。这意味着您的JavaScript正在搜索“旧” HTML，而不是“新”。

您想要的是像这样将点击事件更改为“实时”。

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

event将是click，submit等

element是元素（id或class等）的选择器

JavaScript在.html（）

1 个答案: