Editing HTML with jQuery not reacting

JavaScript
1

So this is my pen --> https://codepen.io/Mike-was-here123/pen/MqJZdb?editors=1010

My navbar at the top (not the side one) is on HTML line 98. Now when you click on the back button, you can see iI takes you to a section page that allows you to pick between container and children. The container button selection is the one you saw at the start (what it should take you too when you hit it).

What actually happens is when you hit the back button it takes you to the selection page, but when you go to click on the #container or #children buttons it just does nothing.

On Line 46 to 96 of my JS you can see my jQuery. Line 46 is the code activated when you click the back button, but nothing is happening when you activate the other two on click commands (container and children) despite their being HTML code that should be loading in.

Why is this?

2

You put your $(“#container”).click handler after the $(“.backButton”).click, so since an element with id=“container” does not exist on the page until the Back button is clicked, the following line does not cause the anonymous function do be attached to anything.

$("#container").click(function(){

One way to get it to work, is to move this click event handler to the point after you replace the html of the element with id=“replace” (see below). In your current code, you would insert it after line 56, but still within the $(“.backButton”).click callback function.

  $("#replace").html(`<div class="navBigBar">
            <div class="backDiv">
              <button class="backButton">Back</button>
            </div>
                        <div class="bigBarNavBtnsDiv">
             <button class="navBigBarItem bigFlexTopicBtn" id="container">Container</button>
             <button class="navBigBarItem bigFlexTopicBtn" id="children">Children</button>
              </div>
          </div>`)

However, doing what I suggest above, then breaks the back button from working again. You have a case of which comes first, the chicken or the egg.

You are going to need to rethink your approach to get this to work the way you want. Did you consider putting all the content in the html section and then using show and hide methods to show the desired content?

1 Like
3

Thanks so much, i would’ve never thought of that.

I tried the hiding method you mentioned and it worked (Line 46 JS) --> https://codepen.io/Mike-was-here123/pen/MqJZdb?editors=1010

I have not connected up the href’s yet so its not going to navigate anywhere. I only made it currently so it limits you to the CSS > FLexbox area (You can’t go back past the container and children selection area).

4

edit: solution is $(document).on('click', '.your-class', function(){ })

@camperextraordinaire

Update: Anyway around display: none;?

I’m still confused why when i inject HTML code using JS it pops up on the HTML and the in console elements yet it just apparently doesn’t exist when it comes to onclick commands?

(I think that is what is happening)

Here is my pen --> https://codepen.io/Mike-was-here123/pen/BGNwZO?editors=1010

When you click on the card (picture) you can see how it swaps to a different HTML

https://i.postimg.cc/jS8jT8s0/b82dbfbecc8ecaf4ea1677b47ac89431ac5cc207.png

I do that on line 16 in my JS. Note on line 21 I create a backup before I switch it on line 23.

Now when I click on the back button it should activate the onclick code on line JS line 42 (.back) and load that backup (that made before it switches - global var). Now for some reason, it won’t load or even react. Why?

The onclick command that is not running:

$(".back").click(function () {
    console.log('Is it working???')
    // just a check. The console does not come back with this at all meaning this onclick is not being activated                        
    $("#"+id).html(backup)
    // created a copy of playercard before i changed it
  })

Hopefully, this made sense?