Contenedores múltiples cargados con Ajax

I'm trying to load dynamic content uisng Ajax. It starts with a listing of countries. When a country is clicked we get the cities in that country etc right upto the branch detail so it looks like this:

Countries --> Cities --> Suburbs --> Companys --> Branches --> Branch Detail

I've managed to load the cities i.e. when a country (Australia in this case) is clicked it will load the cities. However, I can't seem to get the script to load subsequent content i.e. (suburbs, Companys, branches and branh detail etc) to work/load.

I've created a jsbin @ , but because multiple files need to be called its not loading the as it should be, a complete sample can be downloaded from Git

El código que he usado es el siguiente:

The index file

<div id="countries" class="columns">
    <a class="link-item" href="#citylist" data-url="australia.html">Australia</a><br>
    <a class="link-item" href="#citylist" data-url="uk.html">UK</a><br>
    <a class="link-item" href="#citylist" data-url="usa.html">USA</a>

<div id="citylist" class="columns">
<div id="suburblist" class="columns">
<div id="companylist" class="columns">
<div id="branchlist" class="columns">
<div id="branchdetail" class="columns">
    <h4>BRanch Detail</h4>

El JQuery

$(function() {
 $("").click(function (e) {
   var url = $(this).attr("data-url");
   var href = this.hash;


The external files to load

country.html -- List of cities in Australia

<div id="cities">
    <a class="link-item" href="#suburblist" data-url="perth.html">Perth</a><br>
    <a class="link-item" href="#suburblist" data-url="sydney.html">Sydney</a><br>
    <a class="link-item" href="#suburblist" data-url="melbourne.html">Melbourne</a><br>

city.html -- List of suburbs in Perth

<div id="suburbs">
    <a class="link-item" href="#companylist" data-url="suburb.html">Myaree</a><br>
    <a class="link-item" href="#companylist" data-url="suburb.html">Applecross</a><br>
    <a class="link-item" href="#companylist" data-url="suburb.html">Como</a><br>

suburb.html -- List of Companies in Suburb 1

<div id="companies">
    <a class="link-item" href="#branchlist" data-url="company.html">Company One</a><br>
    <a class="link-item" href="#branchlist" data-url="company.html"> Company Two</a><br>
    <a class="link-item" href="#branchlist" data-url="scompany.html"> Company There</a><br>

company.html -- List of Branches in Company 1

<div id="branches">
    <a class="link-item" href="#branchdetail1" data-url="branchdetail.html">Branch One</a><br>
    <a class="link-item" href="#branchdetail2" data-url="branchdetail.html">Branch Two</a><br>
    <a class="link-item" href="#branchdetail3" data-url="branchdetail.html">Branch There</a><br>


<h1>Some Detail about the Branch</h1>
<p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.</p>

preguntado el 28 de mayo de 14 a las 14:05

1 Respuestas

It isn't working because you're binding your click event on load so the lists that are populated on the fly don't have the click binding. Try to change your click event binding to this:

$("body").on("click", "", function (e) {

contestado el 28 de mayo de 14 a las 14:05

Thanks so much for that very appreciated. Just crossed my mind if you could help me a bit more :). How would you reset the loaded content to blank based on the parent re clicked, for example, if a different suburb is clicked the branches change and branch detail is reset to blank or if a different city is clicked then the suburbs change and the rest are reset etc. - Said

If by reset you mean clear everything out of the div, all you would need to do is call it like this: $('#suburbs').empty(); - Evidica

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.