Question

I am working on a hand me down project that was written by someone who was clearly better at HTML and JavaScript than myself. The html has AJAX links like this:

<ul class="subNav">
       <li><a link="contacts.html">Contacts</a></li>
       <li><a link="contacts_add.html">Add Contact</a></li>
</ul>

Which I think are handled in this code:

$('.subNav li a').click(function() {

        var href = $(this).attr('link')

        $('#mainStage').load(href, function() {
            pageLoad();
        })
})

All of the code above works perfectly.

My problem is I can’t seem to recreate this functionality. I am using this HTML:

 <div class="nameTitle colorOne"><a link="contacts_add.html">
      <span class="firstNameField">Contact Name</span>
 </a></div>

and this JavaScript:

$('.nameTitle').click(function() {
        alert('')
        $('#mainStage').load("contacts_add.html", function() {
            pageLoad();
        })
})

When I click the “nameTitle” class it should load contacts_add.html into the mainStage section of the page but I cannot see anything happen. I am sure someone fluent with this style of coding could tell me why my event never fires but the earlier code does.

Thanks in advance,

Answer 1

You should try altering your code to something like this:

$('.nameTitle').click(function() {

  //This line finds the address to load
  var address = $(this).children("a").attr("link");

  //This line loads the address and then runs the pageLoad function when it has completed
  $('#mainStage').load(address, function() {
    pageLoad();
  });
});

If this doesnt work it may be because the html is loaded dynamically. In this case you need to use .on, see this link here.

In response to Brett’s comment below ive put together a jsfiddle showing .on in action here. Also i added .preventDefault as this could cause a problem.