javascript - 我无法使用 .load() jquery 返回上一页

Question

加载 tareas.html 后无法返回到页面 cal.html

index.html
cal.html
tareas.html

---index.html-----

 <div id="contenedor">

 </div>

//这里的内容日历 ---calendar.html---

<div>
    <div class="tabs colortopbar" id="tabtarea">

           <div class="tab-item colortextbar bartabcolor">
                Calendario
           </div>

           <div class="tab-item colortextbar" id="agregar">
                Agregar
           </div>
    </div>
</div>

//这里列出内容 ---tareas.html---

    <div>
        <div class="tabs colortopbar" id="tabtarea">

               <div class="tab-item colortextbar" id="calendar">
                    Calendario
               </div>

               <div class="tab-item colortextbar  bartabcolor">
                    Agregar
               </div>
        </div>
    </div>

这是加载tareas.html，工作

$('#agregar').click(function(){
    $('#contenedor').load('tareas.html');
 });

这是加载cal.html，这不起作用，如何解决这个问题？

$('#calendar').click(function(){
    $('#contenedor').load('cal.html');
});

Answer 1

我在您的索引页上没有看到#agregar 或#calendar，我希望此工作流程从那里开始。假设这些元素位于您的索引页面上，您会发现您在局部加载的新 #agregar 和 #calendar 元素没有绑定(bind)到它们的事件。事件在页面加载时绑定(bind)一次。

根据您的框架，有很多方法可以处理这个问题，但最终您会想要使用 event delegation .