单击使用 .append()

如何解决单击使用 .append()

我制作了一个“组件”系统，将 HTML 代码附加到包含某些类的某些元素，例如以下元素：

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

导入一个写有“SPEED TEST”的按钮。导入的按钮具有以下代码模板：

 <!-- 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>

使用这个模板我可以轻松地导入组件，但是我遇到了一个问题我不知道如何解决，我之前展示的带有 eBtn 类的第一个元素也有 pageChanger 类和page 属性，我的导航脚本使用这些属性来更改页面，使用以下函数：

    $(".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
    });

它适用于除 eBtns 之外的任何其他元素，我确实使用 eBtn 容器通过 CSS 为其内容设置动画，因此在单击它时它应该可以工作（我什至在其上添加了 pointer-events:all）但是该函数甚至没有被调用。

我不知道如何在点击 pageChanger 的子元素时触发该函数。

解决方法

在执行 jQuery 时，您的动态 HTML 内容可能尚未加载。

您可以尝试在文档上添加事件侦听器，如下所示，以使其适用于任何动态添加的 HTML 内容：

$(document).on('click','.pageChanger',function(){ ... });