Define a button's onclick event in Jquery

Question

I have a <button> in order to scroll the page to a specific DIV when clicked (#contact)

<button onclick="location.href='#contact';">Click Me</button>

How to define it in Javascript?

$('button[onclick^="#"]').on('click',function (e) {
// Some stuffs here...
});

I'm using this to animate the scrolling from a button to a DIV:

$('a[href^="#"]').on('click',function (e) {
.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});

But it works only on a hrefs because of its a[href^="#"]. So I'm interested to make it work on my <button>s

I don't want to duplicate my button's style to a a tag, also I'm interested to learn sth new instead of using <a href..> — Farzad Bayan
– Farzad Bayan, Commented Sep 11, 2013 at 12:16
I don't understand what you are asking for. Do you want to bind the event handler without jQuery? — Felix Kling
– Felix Kling, Commented Sep 11, 2013 at 12:19
Your question says 'Define a button's on click event'. If that's what you want to know, something along lines of $('button').click(function(e){//logic}) would work (which already seems there in your question). Please be a little more elaborate if that is not what you want. — Rajat Sharma
– Rajat Sharma, Commented Sep 11, 2013 at 12:22
I added more information to the question, so is it understandable now or need more explain? — Farzad Bayan
– Farzad Bayan, Commented Sep 11, 2013 at 12:27

Adrian Salazar · Accepted Answer · 2013-09-11 12:15:12Z

3

Define the button(s)

<button class="jumper" data-href="#contact">Click Me</button>

Attach the click event.

$('button.jumper').click(function (e) {
    // new location
    location.href= $(this).data().href;
});

answered Sep 11, 2013 at 12:15

Adrian Salazar

5,32936 silver badges52 bronze badges

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

5 Comments

Arthur Kovacs Over a year ago

You're using jQuery there. Pure JS: object.onclick=function(){SomeJavaScriptCode};

Adrian Salazar Over a year ago

@ArthurKovacs Hmmm... what if the title of this post would say: "Define a button's onclick event in Jquery"? oh... guess what... it is the title of this post. Joking. Of course the straightforward way using pure old JS is the best, but he asked for JQ.

Arthur Kovacs Over a year ago

Yeah, "... event in Jquery", apparently I missed the title and the first line from the question itself put me in JavaScript mode :) . No prb.

Farzad Bayan Over a year ago

But it's impossible to add the Jquery scroll animation to this pure JS method.

Adrian Salazar Over a year ago

You replace my entire click handler with your click handler from your question. Just need to change this line $target = $(target); to this line $target = $($(this).data().href);

Chirag Vidani · Accepted Answer · 2013-09-11 12:16:36Z

0

You can also do it with anchor tag <a>

Top <a href="#bottom">Go to Bottom</a>

<div id="bottom">
Bottom
</div>

Refer above sample code

answered Sep 11, 2013 at 12:16

Chirag Vidani

2,59519 silver badges27 bronze badges

Comments

Sled · Accepted Answer · 2013-09-11 12:40:44Z

0

Html

<button id="clicker" onclick="location.href='#contact';">Click Me</button>

JQuery

$('#clicker').click(function (e) {
  $.scrollTo($('#somediv'), 300);
});

edited Sep 11, 2013 at 12:40

Sled

19.2k28 gold badges125 silver badges174 bronze badges

answered Sep 11, 2013 at 12:20

Sasidharan

3,7603 gold badges21 silver badges37 bronze badges

1 Comment

Farzad Bayan Over a year ago

Should the #somediv be same as #contact? I couldn't make it work.

cocco · Accepted Answer · 2013-09-11 13:02:19Z

jQuery

for your button' s

$('button[onclick^="location.href=\'#"]').on('click',function (e) {
 e.preventDefault();
 var target = this.hash,
 $target = $(target);
 $('html, body').stop().animate({
  'scrollTop': $target.offset().top
 }, 900, 'swing', function () {
  window.location.hash = target;
 });
});

A jQuery way to getthe buttons that contain a click event with the value 'location.href=#'

$('button[onclick^="location.href=\'#"]').on('click',function (e) {
 // Some stuffs here...
}

Ways to find/create buttons and define onclick event in javascript:

Search the first button (note [0])

document.getElementsByTagName('button')[0].onclick=function(){
 location.href='#contact';
}

get the button by id (note 'myButton')

document.getElementById('myButton').onclick=function(){
 location.href='#contact';
}

create the whole button dynamically and add it to the body

var button=document.createElement('button');
button.onclick=function(){
 location.href='#contact';
}
document.body.appendChild(button);

modern ways to find the button

var button=document.querySelector('button');

var button=document.querySelectorAll('button')[0];

B pure javascript way to getthe buttons that contain a click event with the value 'location.href=#'

var buttons=document.querySelectorAll('button[onclick^="location.href=\'#"]');

non ie events

button.addEventListener('click',function(){
 location.href='#contact';
},false);

ie events

button.attachEvent('onclick',function(){
 location.href='#contact';
});

any questions?

Rishabh Agrahari · Accepted Answer · 2017-08-26 17:11:42Z

0

Try this:

HTML:

<input type="submit" value="submit" name="submit" onclick="myfunction()">

jQuery:

<script type="text/javascript">
 function myfunction() 
 {
    // do whatever you want
 }
</script>

answered Aug 26, 2017 at 17:11

Rishabh Agrahari

3,7672 gold badges25 silver badges24 bronze badges

Collectives™ on Stack Overflow

Define a button's onclick event in Jquery

5 Answers 5

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related