JavaScript Event Handler jQuery

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,

Undefined · Accepted Answer · 2012-07-22 23:58:33Z

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.

edited Jul 22, 2012 at 23:58

answered Jul 22, 2012 at 23:46

Undefined

11.4k5 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brett Over a year ago

Thanks Sam, this code does not work as you predicted. I tried this ` $('.nameTitle a').on('click', function(){...` but it did not work. Can you provide me an example of how to use the a .on.

Undefined Over a year ago

@Brett Sure i can, give me a moment to setup an example

Undefined Over a year ago

@Brett Take a look at my jsfiddle example now, if your using firebug you can see the log message as it is being called.

Brett Over a year ago

your example works in jsfiddle but for some reason it breaks when combined with my other code.

Aadaam · Accepted Answer · 2012-07-22 23:54:16Z

0

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.

answered Jul 22, 2012 at 23:54

Aadaam

3,7491 gold badge16 silver badges9 bronze badges

Comments

nbrooks · Accepted Answer · 2012-07-22 23:55:30Z

0

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.

answered Jul 22, 2012 at 23:55

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

1 Comment

nbrooks Over a year ago

p.s. It goes without saying that you need to have jQuery included in the page for this to work...

Collectives™ on Stack Overflow

JavaScript Event Handler jQuery

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related