HTML failing to .clone in jQuery

I can’t figure it out. Everywhere i look i cannot find this issue and everyone uses it the exact same way with working results.

My Pen --> https://codepen.io/Mike-was-here123/pen/BGNwZO?editors=1010

When the user clicks on the card on the html, it activates a onclick command on line 19.

$('.player-card').click(function() {
   id = event.currentTarget.id;
    // Each card has its own ID, just figuring out which card you hit based on that id
  if (check == 0) {
    // this is so i dont override my backup
     backup = $("#"+id).clone()
        // creates backup so the user can navigate back'
  }
  check=1;
// preventing override next time card is clicked (for back button)
  arr = tags[id];
// doesn't matter for this issue
  $("#"+id).html(`HTML goes here- see pen for details`)
  // inserting the new html, notice the back button. Doesn't matter for this issue.
});

When they click i get the ID, check if this is their first time hitting the card, then if that passes i try and use .clone() to clone the HTML object for later.

backup = $("#"+id).clone()

Note: i initially declared backup as: let backup = "Error 404, backup not found";

Now when the user tries to use that back button on JS line 48 i have

$(document).on('click', '.back', function(){
      console.log(backup)
    // just a check. Console does not come back with this at all menaing this onclick is not being activated
     $("#"+id).replaceWith(backup)
// created a copy of playercard before i changed it
    check  = 0;
  })

For some reason backup variable is not overridden, so i here .player-card is shifted to .backup’s innialte value instead of HTMl which is should’ve cloned- which it did not.

After all of this, why is .clone() just not activating?

You’re checking if check == 0, but check is declared as let check; which is just undefined.

Or declare it as let check = 0; or write the if statement as if (!check).

1 Like

Thanks, that solves that issue. But i found another one.

Why i click on the card and then hit back to switch now it doesn’t let me click on it again to switch

For some reason check is now 1 despite me now setting ti as 0 on line 52

You setup the click listener on all .player-card:

$('.player-card').on('click', function() {

But then you change the html of one of the cards:

$("#"+id).html(`<div class="player-card">
...

When you create/modify the elements you were listening to, you need to rebind the events to have effects on the new ones. Which means you’d need to call on('click') on .player-card again.

Another way to do it would be to listen on the document itself and filter to only .player-card.

// $('.player-card').on('click', function() {
$(document).on('click', '.player-card', function(event) {
1 Like

Thank you so much for solving this issue, but another issue occurs.

IF i do two at the same time, they both break completely.

I know it has to be something to do with check, but how would i fix this?

You have only one backup, so you’re overwriting the first one when you click on the second. One idea to solve it is by having backup to be an array of objects, each object could be like { id: 1, backup: '...' }.

1 Like

Okay i am very close to getting this working (thanks to your help) but i ran into one last issue when making the database:

let backupObj = {
}
$(document).on('click', '.player-card', function(event) {
   id = event.currentTarget.id; console.log(check)
  id = Number(id)
  if (check == 0) {
     backup = $("#"+id).clone()
     backupObj[id] = backup
  }
  check=1;
  arr = tags[id];
  console.log(arr) // Goes onto the card
  $("#"+id).html(`HTML GOES HERE`)
  // inserting the new html, notice the back button
});
  $(document).on('click', '.back', function(){
     $("#"+id).replaceWith(backupObj[id]) // calling from databse
    console.log(id+ "    ID")
    console.log(backupObj)
    check = 0;
  })
});

Now for some reason, I can only do one at a time. When I do two at a time, one just tends to delete itself despite me saving it has two different things in the object storage.

It also can only do it once when switching back it forth. On the second attempt when i go to hit back it just doesn’t work. Why is it able to do it once, then not be able to do it again?

You’re overwriting everything because you’re using only one id and check variables. If you think about, when the user clicks on a .played-card it will set id and check, then when the user clicks on the second .played-card it will overwrite those variables and you’ll lost track of the first one.

It would take too long to demonstrate here what I mean, so I’ve forked your project, made the changes and added some comments. Let me know if you don’t understand something.

1 Like

Thanks so much for you help dude.

I’m confused with:

 if (backupObj[id] || $(event.target).hasClass('back')) {
    return; 
  }

Is this to prevent overwriting the variables, so it skips to the back button on click event lister since both are activated when you hit the .playercard?

Ps
I saw your Technical documentation project, i suggest using a less bright red. Otherwise its awesome.

Yes. But I don’t think the order in which the functions are called are guaranteed, what we know is that both will be called when the user clicks on the back button. Since we don’t want to run that function when the user clicks on the back button, because if it runs before the other one it will overwrite the backup, we just return from it.

Thanks, I agree! I took my time to do the mobile version but kinda of rush for the desktop. Definitely going back to improve it later.

1 Like

I am also going to be showing my pen to someone, so can you delete the forked one. I will put your name in the credits for your help.

Your work is incrediabbly nice, where did you learn?

I’ve deleted it already.

Thanks dude. I’m self-taught like almost everyone here :grin:

1 Like

Your very good at it :slight_smile:

Where do you get inspiration from?

I know my way in programming, but I feel I lack in design. Focusing hard to improve it though.

1 Like

I havea minorissue with bootstrap.

I am trying to put it local on my computer, which means i need to import everything.

Here is the git --> https://github.com/michaelnicol/HemritCraft-Tag

The cards work so it isn’t the jQurey or JS

The container class works (for example) so i know it isn’t CSS importing that is the issue

However, small things like the a elements when you flip the cards and the color is not working so it must be bootstrap.

<head>
  <meta charset="UTF-8">
  <title>hermitcraft tag</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/style.css">
</head

For some reason my media quires on line 113 (on codepen) just do not work. I have never seen this issue before. Randomly stuff like my container will not go to 100% width

You have two head elements in your index.html, use only one.

Also make sure you always put your own css after all other css, otherwise others libraries will override your styles.

Something like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>hermitcraft tag</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
...
1 Like

Thank you, i have one last issue.

For some reason my media quires on line 113 (on codepen) just do not work. I have never seen this issue before. Randomly stuff like my container will not go to 100% width.

I have used media query’s in the exact same way before with no issue, but now it just wont work.

Fix your imports, you have a multitude of stuff overriding your stuff. Look in google developer console, your @media is the last one on this list, there’s _grid.scss and boostrap overriding it.

What do you mean by ‘fix my imports’? How is bootstrap overriding a media query?

Also here is a helpful writing web tool for simple drawings on the web that i personally use: https://chrome.google.com/webstore/detail/write-on-web/fhdnnnonejjamkdfpeckggkaejdjhpen?hl=en

If multiple css selector target the same element, then whichever is called last overrides the previous one. If you look at your css imports, you’ll see that your own css is being imported first, then bootstrap. Which means bootstrap will override your own css when they target the same element.

You have multiple problems in your index.html, I’d fix them one by one:

  1. You have 2 head tags. Delete one.
  2. You have 3 bootstrap imports. Use only one.
  3. Your own css import is above two of the bootstrap imports. Make your own css import the last.