I can not go back to previous page using .load() jquery

Question

I can not go back to the page cal.html after loading tareas.html

index.html
cal.html
tareas.html

---index.html-----

 <div id="contenedor">

 </div>

//content calendar here ---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>

//content list here ---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>

this is to load tareas.html, work

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

this is to load cal.html, this don't work, how to fix this?

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

Answer 1

I don't see #agregar or #calendar on your index page where I would expect this workflow to begin. Assuming those elements are there on your index page, you will find that the new #agregar and #calendar elements you are loading in your partials do not have events bound to them. The events are bound once on page load.

There are lots of ways to handle this depending on your framework, but ultimately you will want to employ event delegation .