1

I made a "component" system that append HTML code to certain elements containing certain classes, for exemple the following element :

   <!-- eBtn -->
   <div class="eBtn pageChanger" text="SPEED TEST" page="demo" style="margin-bottom: 10px;"></div>

Imports a button with "SPEED TEST" writen on it. The imported buton have the following code template :

 <!-- eBtn -->
 <div class="frow center">

    <div class="eBtn-left frow center">

        <div class="eBtn-line-c2 fcol center">
            <div class="eBtn-line2"></div> 
         </div>

        <div class="eBtn-line-c1 fcol center">
           <div class="eBtn-line1 l1l"></div> 
        </div>

    </div>

    <div class="eBtn-frame">

        <div class="eBtn-bg">
            <span id="eBtn" class="eBtn-text uB">text</span>
        </div>

    </div>

    <div class="eBtn-right frow center">
        
        <div class="eBtn-line-c1 fcol center">
            <div class="eBtn-line1 l1r"></div> 
        </div>

        <div class="eBtn-line-c2 fcol center">
            <div class="eBtn-line2"></div> 
        </div>

    </div>

</div>

Using this template I can import component easely, but I have ran into a problem I don't know how to fix, the first element with eBtn class I shown before also has pageChanger class and a page attribute, those are used by my navigation script to change the page, using the following function :

    $(".pageChanger").click(function() { // When user click on a pagechanger elt
            clearTimeout(eContainerInstance); // Clear the eContainer instance to avoid weird bahavior
            clearTimeout(navLoadInstance); // Clear navLoad instance
            var newPage = $(this).attr("page"); // get clicked elt destination
            console.log(newPage)
            changePage(newPage); // Change page to the desired page
            $(".navbar").addClass("toggled"); // add toggled to navbar to be sure it is not affected by ScrollFx until user scrolls
    });

It work for any other elements except my eBtns, I do use the eBtn container to animate its content with CSS so it should work when clicking on it (I even added pointer-events:all on it) but the function is not even called.

I have no clue how to trigger the function when child element of pageChanger is clicked.

Stephen Milic
  • 61
  • 5

1 Answers1

2

At the time when your jQuery is executed, your dynamic HTML content might not be loaded yet.

You can try adding the event listener on the document, as follows, in order to make it work on any dynamically added HTML content:

$(document).on('click', '.pageChanger', function(){ ... });
NullDev
  • 6,739
  • 4
  • 30
  • 54
Catalin Anton
  • 36
  • 2