jQuery: call click(); from another click();

Question

Hi. Is it possible to do something like this

$('#idone').click(function(){
 alert('we do stuff!');
});

$('#idtwo').click(function(){
 $('#idone').click();
});

... i guess not, but are there any possible workarounds?

!UPD:

Well, ok. It's a little bit more complicated. I have a jCarousel analog installed - JQueryTOOLS - Scrollable - I guess that's what its name the link: http://flowplayer.org/tools/demos/scrollable/gallery.html

I presume that it has click() event somehow hardcoded in it and when i click thumbs the plugin scrolls it to center position. Then I've bound another click event, so that I can display large image. It works similar to the example in the link above

Now I have to make this big image clickable, so clicking it I can proceed to next image in gallery, I did that, but now I have to make the carousel scroll automatically to the next thumb when I am clicking this big image. So, if I simplify my code, the essence is still smth like that:

$('#idone').click(function(){
 alert('we do stuff!');
});

$('#idtwo').click(function(){
 $('#idone').click();
});

where #idone is a thumb in the gallery, #idtwo is that preview image. I dont know what function is bound to click by default. Another thing: my guess was that binding the same event to the same object should replace the previous - it appears not necessarily.. And I'm pretty sure that it is exactly click();, not mouseup\down etc. cause calling

$('#idone').click();

on page load does the trick and carousel scrolls to the thumb with id="idone"

just in case: jquery-1.3.2.js

thanks everyone for your answers, and excuse me my lame English, no time for brushing up (:

!UPD:

ok! so I gave up on this one )) But to close this question and put an end to this discussion i have to know. All you people, who wrote that it is possible and suggested variants. HAVE YOU TRIED THEM?! Do they really work for you? Is it me, who is wrong? And - Thanks anyway!

Answer 1

Define a separate function which is called by both events?

function doSomething() {
 alert('we do stuff!');
}

$('#idone').click(doSomething);    
$('#idtwo').click(doSomething);

or simply

$('#idone, #idtwo').click(doSomething);

[EDIT - jQuery Scrollable]

Have you tried using this with the thumbnails in jQuery Scrollable:

$('#idone').next(); 

(I presume #idone is scrollable)

Answer 2

Actually calling:

$("#idone").click();

will do what you want: call the click() event handlers on #idone.

That being said, I would advise splitting it out into a separate function as chaining event handlers like this has the potential to confuse someone else reading the code. For example:

$('#idone').click(idone_click);
$('#idtwo').click(idtwo_click);

function idone_click() {
  alert("id one click");
}

function idtwo_click() {
  idone_click();
}

Of course, if you simply want them both to do the same thing you can do this:

$("#idone, #idtwo").click(function() {
  alert(this.id + " clicked");
});

Answer 3

This would be another possiblity:

$('#idone').click(function(){
 alert('we do stuff!');
});

$('#idtwo').click(function(){
 $('#idone').trigger('click');
});

edit: I just see that your code should work like that already.

Answer 4

I see. Then you may want to do something like this.

$('#image_wrap img').click(function(){ // big image is clicked
    // figure out the active element of the items below
    $active_element = $('.scrollable .items .active');

    // move along to the element to its right
    $nextone = $active_element.next();

    // trigger a click on this element
    $nextone.trigger('click');
});

That way, when you click the big image, a click event on the next preview image in the list is triggered.
(If that element doesn't exist, jQuery is nice and does nothing - no errors.)