CODEWITHSUNDEEP
javascriptjqueryhtml
Brett
Brett

Reputation: 3316

JavaScript Event Handler jQuery

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,

Upvotes: 0

Views: 100

Answers (3)

Undefined
Undefined

Reputation: 11431

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.

Upvotes: 1

nbrooks
nbrooks

Reputation: 18233

The 'click' event will never be raised on your div, since there is an inner a element with an href defined. Once you click, the event will be raised on the anchor link first which will, by default, redirect to the location specified by the href. In order to get this working, catch the click when it is raised at the a:

$('.nameTitle a').click(function(e) {
    e.preventDefault(); // prevent browser from following href
    alert('');
    $('#mainStage').load("contacts_add.html", function() {
        pageLoad();
    });
});

Demo -- Commented out the load, since that page isn't on this server. Also notice I changed your a element to have attribute href instead of link.

Upvotes: 0

Aadaam
Aadaam

Reputation: 3739

try with

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

It can be that you're trying with a browser which accepts click only on 'a' tags, albeit they're getting rare hopefully.

Upvotes: 0

Related Questions