Jquery: each button click, in the same class must to replace a content of div stored in vars depends on attr value

Question

I've got few buttons inside div. The thing is, i need to display various content depends what value is attached to it's attribute "link", after clicking. When the button is clicked, function picks a value inside "link" attribute and if it's the same as predefined value, displays adequate content. New displayed buttons, however, do not work at all. They work only once. I read it's good to use '.on' instead of '.each' but I have no clue how to implement this into my code. This is how it looks:

$(document).ready(function() {
  console.log("loaded");

  //default hide fnc
  function hide_at_start() {
    $.each([arr_buttons, arr_inputs], function() {
      $.each(this, function() {
        $(this).hide();
      });
    });
  }

  //Show me all
  function showall() {
    $.each(arr_buttons, function(i) {
      $(this).delay(interval * i).show(ftime);
      console.log("displayed");
    });
    setTimeout(function() { //after some time
      $.each(arr_inputs, function(i) {
        $(this).delay(interval * i).show(ftime);
        console.log("displayed");
      });
    }, half_ftime);
  }
  //Hide all
  function hideall() {
    $.each(arr_buttons, function(i) {
      $(this).delay(interval * i).hide(ftime);
      console.log("hid");
    });
    setTimeout(function() {
      $.each(arr_inputs, function(i) {
        $(this).delay(interval * i).hide(ftime);
        console.log("hid");
      });
    }, half_ftime);
    setTimeout(function() {
      $.each(content_div, function(i) {
        $(this).delay(interval * i).fadeOut(ftime);
      });
    }, half_ftime);
  }

  //Vars
  var ftime = 400; //fading time
  var half_ftime = ftime / 2; //half fading time
  var interval = 75; //fading interval
  var arr_buttons = $.makeArray($("#middlecontainer .button-item"));
  var arr_inputs = $.makeArray($("#middlecontainer input"))
  //Selectors
  var middle = $('.replaceme');
  var content_div = $("#middlecontainer div");
  //starting point
  hide_at_start();
  showall();
  //..........................................
  //Contents
  var mailer = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">Hajduk Mailer</button><button class="button-item" link="doors">Doors</button><button class="button-item" link="transport">Transport</button><button class="button-item" link="checker">Checker</button></div>';
  var doors = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">mailer</button></div></div>'
  var transport = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">mailer</button></div></div>'
  var checker = '<div class="replaceme"><div class="row d-flex justify-content-center flex-wrap" id="mailer"><button class="button-item" link="mailer">mailer</button></div></div>'

  // Why new replaced buttons do not work after clicking??? 
  $(".button-item").each(function() {
    $(this).click(() => {
      var link = eval($(this).attr("link"));
      hideall();
      setTimeout(function() {
        middle.replaceWith(link);
      }, ftime);

    });
  });

  //Is it becouse i need to use '.on' insteed of each for new replaced, appeared elements (buttons)? How???

  /* $(document).on('click', '.button-item', function(e) {
    console.log('ok');
    var link = eval($(this).attr("link"));
    hideall();
    setTimeout(function(){
      middle.replaceWith(link);
  },  ftime);
    }); */

});

body {
  font-family: 'Ubuntu', sans-serif;
}

p,
span {
  font-family: 'Ubuntu', sans-serif;
}

h1,
h2,
h3 {
  font-family: 'Leckerli One', cursive;
}

h2 {
  font-size: 2.5rem;
}

a {
  color: rgb(0, 0, 0);
  background: white;
}

a:hover {
  color: rgb(255, 0, 0);
  text-decoration: none;
}

a:visited {
  color: brown;
}

.fullp {
  position: relative;
  background: red;
  min-height: 100%;
  height: 100vh;
}

.middlecontainer {
  width: 80%;
  position: relative;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
}

.p15 {
  padding: 1.5rem;
}

.m15 {
  margin: 1.5rem;
}

.bg-a {
  background: blue;
}

.bg-b {
  background: aquamarine;
}

.bg-c {
  background: yellow;
}

.button-item {
  width: 7rem;
  padding: 5px;
  margin: 7px;
  height: 7rem;
  border: solid 5px white;
  border-radius: 10px;
  background: rgb(221, 221, 221);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  text-shadow: 1px 1px 5px rgb(255, 255, 255);
  font-weight: bold;
  color: rgb(51, 51, 51);
  transition: background .35s ease-in-out;
  -webkit-transition: background .35s ease-in-out;
  -webkit-transition-duration: 0.35s;
  /* Safari */
  transition-duration: 0.35s;
  transition-timing-function: ease-out;
}

.button-item:hover {
  background: rgb(255, 255, 255);
}

.button-item:active {
  -webkit-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.75);
  position: relative;
  top: 5px;
}

.item {
  padding: 10px;
}

.title {
  color: rgb(235, 235, 235);
  text-shadow: 1px 1px 20px black;
  padding: 2rem;
}

.title h1,
h2 {
  text-decoration: underline;
}

.title p {}

.signature {
  position: fixed;
  border: solid 3px white;
  border-radius: 10px;
  background: white;
  line-height: 1.2;
  padding: 5px;
  margin: auto;
  font-size: 0.8rem;
  bottom: -15px;
  left: 20%;
  right: 20%;
  box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.425);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="pl">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Fonts & Bootstrap CSS -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Oswald:300,400,700&amp;subset=latin-ext" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" href="style/style.min.css">
  <link href="https://fonts.googleapis.com/css?family=Leckerli+One|Ubuntu" rel="stylesheet">
  <!-- Optional JavaScript -->
</head>

<body>
  <section id="dashboard" class="fullp">
    <div class="container">
      <div class="row">
        <div class="col-12 d-flex justify-content-center title">
          <h2>FirePlatform</h2><br>
        </div>
      </div>
    </div>
    <div class="middlecontainer" id="middlecontainer">
      <div class="replaceme">
        <div id="main" class="row d-flex justify-content-center flex-wrap">
          <button class="button-item" link="mailer">Mailer</button>
          <button class="button-item" link="doors">Doors</button>
          <button class="button-item" link="transport">Transport</button>
          <button class="button-item" link="checker">Checker</button>
        </div>
      </div>

  </section>

  <!-- Popper.js, then Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Take a look on 64 line. JSFIDDLE here Thanks in advance.

If you're using `$(".button-item").each` then all `button-item` class will be affected. — Mukyuu, Jan 25 '19 at 07:28
Its true, however not for newly appeared .button-items. I have read about it here -> https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method I believe i need to use .on click event somehow. — Coconutcake, Jan 25 '19 at 07:32

score 0 · Answer 1 · answered Jan 25 '19 at 07:35

0

replace your code following hope this will help you.

  $(".button-item").click(function() {
      var link = eval($(this).attr("link"));
      hideall();
      setTimeout(function() {
        middle.replaceWith(link);
      }, ftime);
  });

answered Jan 25 '19 at 07:35

Prince Kumar Dwivedi

257
3
13

I have changed it to: $('#dashboard').on('click','.button-item',function(e) { var link = eval($(this).attr("link")); hideall(); console.log('ok'); console.log(link); middle.replaceWith(link); //<-- this will not work twice or more, however, log from console displays proper values. Why? }); – Coconutcake Jan 25 '19 at 08:05

score 0 · Answer 2 · answered Jan 25 '19 at 08:17

use bootstrap tab facility.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <h2>Dynamic Tabs</h2>
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
      </ul>

      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>HOME</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Menu 1</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Menu 3</h3>
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
    </div>

    </body>
    </html>

score 0 · Answer 3 · answered Jan 25 '19 at 08:23

I got it. It works! use on click event. JSFIDDLE here

$('#dashboard').on('click', '.button-item', function(e) { //<- use on click event insteed of .click
  var link = eval($(this).attr("link"));
  hideall();
  console.log('ok');
  console.log(link);
  $('.replaceme').replaceWith(link); //<- put raw selector here instead of var
});

Jquery: each button click, in the same class must to replace a content of div stored in vars depends on attr value

3 Answers3