jQuery multiple elements .click(function()

Question

I'm trying to give the same function to 2 elements.

Here's what I've got which isn't working:

$(document).ready(function() {
   $('#menu a, p.bodytext a').click(function() {
      $('#content_bg').load($(this).attr('href')+' #content');
      return false;
   });
 });

Now it works if I go like this:

$(document).ready(function() {
   $('#menu a').click(function() {
      $('#content_bg').load($(this).attr('href')+' #content');
      return false;
   });
 });

or like this:

$(document).ready(function() {
   $('p.bodytext a').click(function() {
      $('#content_bg').load($(this).attr('href')+' #content');
      return false;
   });
 });

But does not work with them together.

Suggestions?

That seems unlikely; are you sure the selectors are correct? That you've not missed out a comma, or misspelled something? — David Thomas
– David Thomas, Commented Mar 5, 2012 at 21:42
In the code I'm using now, the #menu a is working, but the p.bodytext a is not. When a link is clicked from the bodytext paragraph, it refreshes the page and loads the content, whereas the #menu a link opens the link within the frame it's supposed to go on the page, without refreshing the page. — Nicole
– Nicole, Commented Mar 5, 2012 at 21:51
Can you reproduce your problem with JS Fiddle, perhaps, so you can let us see what you're working with? — David Thomas
– David Thomas, Commented Mar 5, 2012 at 22:04

Sgoettschkes · Accepted Answer · 2012-03-05 21:43:23Z

1

Use the add method to add elements to a set:

$('#menu a').add('p.bodytext a').on();

answered Mar 5, 2012 at 21:43

Sgoettschkes

13.2k5 gold badges62 silver badges78 bronze badges

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

Comments

Chris Dixon · Accepted Answer · 2012-03-05 21:41:23Z

0

Try this:

$(function() {
   $('#menu, p.bodytext').find('a').on('click', function() {
      $('#content').load($(this).attr('href')+' #content');
      return false;
   });
 });

answered Mar 5, 2012 at 21:41

Chris Dixon

9,1777 gold badges38 silver badges69 bronze badges

Comments

Chris · Accepted Answer · 2012-03-05 21:45:06Z

0

Use class name instead of id.

$(document).ready(function() {
   $('.myClass').click(function() {
      $('#content').load($(this).attr('href')+' #content');
      return false;
   });
 });

answered Mar 5, 2012 at 21:45

Chris

261 bronze badge

1 Comment

Nicole Over a year ago

#menu a works, it's the p.bodytext a that doesn't with the code I'm using.

Nettogrof · Accepted Answer · 2012-03-05 21:50:47Z

0

I suggest to add a receive the parameter 'e' and do a e.preventDefault().

like this

$(document).ready(function() {
  $('#menu a, p.bodytext a').click(function(e) {
     e.preventDefault();
     $('#content').load($(this).attr('href')+' #content');
     return false;
  });
});

answered Mar 5, 2012 at 21:50

Nettogrof

2,1362 gold badges15 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery multiple elements .click(function()

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related