CODEWITHSUNDEEP
jquery
jwinton
jwinton

Reputation: 91

Calling jQuery function on click

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!

Upvotes: 0

Views: 114

Answers (9)

Krish R
Krish R

Reputation: 22711

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

Upvotes: 1

Sender
Sender

Reputation: 6858

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

Upvotes: 0

user2727841
user2727841

Reputation: 725

try this

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

read about on method here

Upvotes: 0

Shivam
Shivam

Reputation: 720

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

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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);

Upvotes: 0

SpiderCode
SpiderCode

Reputation: 10122

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

Upvotes: 0

NRaf
NRaf

Reputation: 7549

Simplest way would be:

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

Upvotes: 0

zzlalani
zzlalani

Reputation: 24364

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

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

Upvotes: 0

Related Questions