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)`? – Jan 31 '14 at 05:38 — , Jan 31 '14 at 05:38

Krish R · Answer 1 · 2014-01-31T05:58:46.970

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 '14 at 05:58

answered Jan 31 '14 at 05:39

Krish R

22,583
7
50
59

score 0 · Answer 2 · answered Jan 31 '14 at 05:39

0

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

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

answered Jan 31 '14 at 05:39

Arun P Johny

384,651
66
527
531

Sender · Answer 3 · 2014-01-31T05:51:02.497

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

score 0 · Answer 4 · answered Jan 31 '14 at 05:39

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('');
}

score 0 · Accepted Answer · answered Jan 31 '14 at 05:40

0

Simplest way would be:

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

answered Jan 31 '14 at 05:40

NRaf

7,407
13
52
91

score 0 · Answer 6 · answered Jan 31 '14 at 05:41

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 '14 at 05:41

SpiderCode

10,062
2
22
42

score 0 · Answer 7 · answered Jan 31 '14 at 05:45

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 '14 at 05:45

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 8 · edited May 23 '17 at 12:14

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

score 0 · Answer 9 · answered Jan 31 '14 at 05:49

0

try this

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

read about on method here

answered Jan 31 '14 at 05:49

user2727841

715
6
21

Calling jQuery function on click

9 Answers9