Calling jQuery function on click

Question

Alright, so I've built a function that looks like this...

function aboutContent(){
  var about = $(this).data('about'),
      img = $(this).data('image');
  $('#background').css('background-image','url('+img+')');
  $('#about-content article').html(about);
  $('#first-name').html('');
  $('#last-name').html('');
}

And I want to call it with a click function, which would look like so...

$('.about').click('click', function() {});

How would I go about calling the aboutContent() function on click?

Thanks!

$('.about').click('click', aboutContent)?

user1508519
– user1508519

2014-01-31 05:38:57 +00:00
Commented Jan 31, 2014 at 5:38 — user1508519
– user1508519, Commented Jan 31, 2014 at 5:38

Krish R · Accepted Answer · 2014-01-31 05:58:46Z

1

Can you try this,

function aboutContent(dis){
  var about = $(dis).data('about'),
     img = $(dis).data('image');
  $('#background').css('background-image','url('+img+')');
  $('#about-content article').html(about);
  $('#first-name').html('');
  $('#last-name').html('');
}
$('.about').click(function() {
    aboutContent(this);
 });

edited Jan 31, 2014 at 5:58

answered Jan 31, 2014 at 5:39

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

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

Comments

NRaf · Accepted Answer · 2014-01-31 05:40:25Z

0

Simplest way would be:

$('.about').click(aboutContent);

answered Jan 31, 2014 at 5:40

NRaf

7,58914 gold badges58 silver badges92 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-01-31 05:39:00Z

0

pass the function reference as the callback instead of a anonymous function

$('.about').click('click',aboutContent);

answered Jan 31, 2014 at 5:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

zzlalani · Accepted Answer · 2014-01-31 05:39:44Z

0

There are different ways to call a custom function

one of them

$('.about').click(function() {
    aboutContent($(this));
});

function aboutContent(_this){

  var about = _this.data('about'),
  img = _this.data('image');
  $('#background').css('background-image','url('+img+')');
  $('#about-content article').html(about);
  $('#first-name').html('');
  $('#last-name').html('');
}

answered Jan 31, 2014 at 5:39

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

Comments

HardikS · Accepted Answer · 2014-01-31 05:41:42Z

0

That's preety simple.

In simple JavaScript you write the code inside function(){....}. In the same way you can implement same in JQuery. Only syntax has been changed. See below code

$('.about').click('click', function() {
aboutContent();
});

answered Jan 31, 2014 at 5:41

HardikS

10.1k2 gold badges25 silver badges42 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-01-31 05:45:28Z

0

You can use callback function like this:

$('.about').click(aboutContent);

Note: $('.about').click('click',aboutContent); is wrong way to do.

But you do use on method like this:

$('.about').on('click', aboutContent);

answered Jan 31, 2014 at 5:45

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:14:13Z

0

Use your code like this,

function aboutContent(){
  var about = $(this).data('about'),
      img = $(this).data('image');
  $('#background').css('background-image','url('+img+')');
  $('#about-content article').html(about);
  $('#first-name').html('');
  $('#last-name').html('');
}

$('.about').click(aboutContent(this));
})

your more information related to this refer this link,

Run jQuery function onclick

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jan 31, 2014 at 5:47

Shivam

7303 gold badges10 silver badges25 bronze badges

Comments

user2727841 · Accepted Answer · 2014-01-31 05:49:26Z

0

try this

$('.about').on('click', aboutContent());

read about on method here

answered Jan 31, 2014 at 5:49

user2727841

7256 silver badges22 bronze badges

Comments

Sender · Accepted Answer · 2014-01-31 05:51:02Z

0

function aboutContent(element){
  var about = $(element).data('about'),
      img = $(element).data('image');
  $('#background').css('background-image','url('+img+')');
  $('#about-content article').html(about);
  $('#first-name').html('');
  $('#last-name').html('');
}


$('.about').click(function() { aboutContent(this);  });
// alternate ways
// $('.about').click(aboutContent(this));
// $('.about').on('click', aboutContent(this)); // Using on event types

edited Jan 31, 2014 at 5:51

answered Jan 31, 2014 at 5:39

Sender

6,91813 gold badges50 silver badges69 bronze badges

Collectives™ on Stack Overflow

Calling jQuery function on click

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related