jquery click event

Question

can we use more than one click event in the Jquery as

$(document).ready(function(){
$('#button').click(function(){
...........click(function(){
...........click(function(){
});

$(this).hide();
});
});

pls help me

i wrap the code due to less space for the code

$('#togglebutton1').click(function() {
      if ($(this).is(':visible')){ 
          $('#bio>div,#heading2,#heading3 ').hide(); 
          $('#bio>div:first').show();
          $('p:first').toggle(
             function() { 
                 $(this).animate({ 'height': '+=15px' }, '1000', 'linear'); 
             }, 
             function() {
                 $(this).animate({ 'height': '-=15px' }, '1000', 'swing');
             }
          );
          $(this).val('ShowImage');
       }else { 
         $(' #bio > div,#heading2,#heading3 ').show(); 
         $(this).val('HideImage'); 
       } 
}); 
$('#bio h3').click(function() { 
     $(this).next().animate({ 'height': 'toggle' }, 'slow', 'easeOutBounce'); }); 
});

can you be more specific on what you really want to achieve?... because everyone is confused?!... why are you putting click() s inside ` .click() ` ? anything I missed? — Reigel Gallarde
– Reigel Gallarde, Commented Jun 1, 2010 at 6:31
bcoz i want to add two different button for hide image and show image. — Piyush
– Piyush, Commented Jun 1, 2010 at 6:42
@picnic4u: That's still not hyper-clear, but if you want to attach the same handler to two different buttons, that's no problem, see yuval's answer — T.J. Crowder
– T.J. Crowder, Commented Jun 1, 2010 at 6:46
i m doing so but image hiding is working but after that the button name is also change but when i click agin to show image it's not working? the code is following — Piyush
– Piyush, Commented Jun 1, 2010 at 6:52
i wrap the code due to less space for the code $('#togglebutton1').click(function() {if ($(this).is(':visible')){ $('#bio>div,#heading2,#heading3 ').hide(); $('#bio>div:first').show();$('p:first').toggle(function() { $(this).animate({ 'height': '+=15px' }, '1000', 'linear'); }, function() {$(this).animate({ 'height': '-=15px' }, '1000', 'swing');});$(this).val('ShowImage');}else { $(' #bio > div,#heading2,#heading3 ').show(); $(this).val('HideImage'); } }); $('#bio h3').click(function() { $(this).next().animate({ 'height': 'toggle' }, 'slow', 'easeOutBounce'); }); }); — Piyush
– Piyush, Commented Jun 1, 2010 at 6:57

Yuval Karmi · Accepted Answer · 2010-06-01 06:28:00Z

3

I think you may have meant running the same function on several different elements. This can be done as such:

$("#mydiv1, #mydiv2, #mydiv3").click(function(){
    //some code
});

Good luck!

answered Jun 1, 2010 at 6:28

Yuval Karmi

26.8k41 gold badges126 silver badges177 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2010-06-01 06:26:06Z

2

Yes, you can bind multiple handlers to the click event of the same element:

$('#myElementID').click(function() {
    // do something here
})

// Elsewhere (presumably)
$('#myElementID').click(function() {
    // do something else here
})

Provided the first handler that gets called doesn't stop the event (via .stopPropagation() or by returning false from the handler), the next one will get called. jQuery guarantees that handlers will get called in the order in which they're registered (even when the browser doesn't). (This is covered in the bind docs, but applies to the click function as well, as click is just a shorthand version of bind for the click event.)

answered Jun 1, 2010 at 6:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

Sarfraz Over a year ago

what's the point of multiple click, it will boil down to same things. The OP basically means multiple events.

T.J. Crowder Over a year ago

@Sarfraz: Usually this comes up when you have disparate parts of the code that both need to hook the event, which either don't know about each other or which shouldn't be inter-dependent. It's the whole point of DOM2 handlers (the addEventListener/attachEvent browsers provide that jQuery uses under the covers). The previous "DOM0" mechanism, onclick attributes, only allowed a single handler, which was limiting. Re what the OP means, that's for them to clarify. What they've said is "multiple click events".

Mark Redman · Accepted Answer · 2010-06-01 06:19:13Z

0

Yes you can bind more than one click event. Have a look at the jQuery "bind" method.

http://api.jquery.com/bind/

answered Jun 1, 2010 at 6:19

Mark Redman

24.6k20 gold badges99 silver badges152 bronze badges

Comments

Sarfraz · Accepted Answer · 2010-06-01 06:19:42Z

0

You can use the bind for that.

Example:

$('#foo').bind('click mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

As can be seen, three evens are attached eg click mouseenter mouseleave to the element with id set to #foo.

answered Jun 1, 2010 at 6:19

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

6 Comments

T.J. Crowder Over a year ago

"More than one click event", not more than one event.

Web Logic Over a year ago

@Crowder: click is also an event, right? Isn't bind used for multiple events?

T.J. Crowder Over a year ago

@Web Logic: Yes, it is, and that's cool. It just doesn't answer the question the OP had (at least, as far as I can tell what the question is).

Sarfraz Over a year ago

what's the point of multiple click, it will boil down to same things. The OP basically means multiple events.

T.J. Crowder Over a year ago

@Sarfraz: See my response to your identical comment on my answer.

|

Reigel Gallarde · Accepted Answer · 2010-06-01 06:25:26Z

0

yes you can... jQuery is good on chaining...

but I think you should clarify more on your question on what really you want to achieve... so that we can suggest more and better idea.. cheers!

answered Jun 1, 2010 at 6:25

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

Jekis · Accepted Answer · 2010-06-01 07:05:42Z

0

$(function(){
    $('#link').click(function(e){
        e.preventDefault(); // unbind default click event
        function1();
        function2();
        function3();
        // or
        var $this = $(this);
        $this.function1();
        $this.function2();
        $this.function3();
    });
});

answered Jun 1, 2010 at 7:05

Jekis

4,7762 gold badges40 silver badges44 bronze badges

Collectives™ on Stack Overflow

jquery click event

6 Answers 6

Comments

2 Comments

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related