-2

I got a little issue with my JavaScript and jQuery fadeIn(), html() and fadeOut() methods.

This is my code below.

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

I'm replacing content inside DIV with ID ReplCont when click on continue button. The problem is after I replace content inside ReplCont DIV my JS for new content doesn't work. But if I put it manually then and refresh the page then JS works fine.

I have some thoughts. Maybe JS loads on page load and after setting new HTML with jQuery I have to reload JS somehow. But I'm no sure. Please help friends!

Thank you in advance!

Aleksey Kiselov
  • 1
  • 1
  • Isn't it better just to add those element with single HTML and don't use dynamical elements at all? I mean what's better for performance or it doesn't really matter? – Aleksey Kiselov Jul 05 '18 at 21:39
  • Elements added by `.html()` _are_ dynamically added elements in this context, meaning elements that are added through code at runtime. – jmoerdyk Jul 05 '18 at 21:45

1 Answers1

-1

When JavaScript adds HTML into the DOM it effects the references to it. This means that your JavaScript is searching for the 'old' HTML instead of the 'new'.

What you would want to is to change your click events to be 'live' like so.

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

event would be click, submit etc

element would be your selector for your element (id or class etc)

connoraworden
  • 581
  • 3
  • 12