单击用.append()[duplicate]导入的子元素时未检测到单击

Question

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

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

导入一个写有“速度测试”的按钮。导入的buton具有以下代码模板：

 <!-- 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
    });

它适用于除了我的EBTN之外的任何其他元素，我确实使用ebtn容器来用CSS动画它的内容，这样当单击它时它应该可以工作（我甚至在它上面添加了pointer-events:all)但函数甚至没有被调用。

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

Answer 1

在执行jQuery时，可能还没有加载动态HTML内容。

您可以尝试在文档上添加事件侦听器，如下所示，以便使它在任何动态添加的HTML内容上工作：

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