We Keep Coding

Is it possible to "steal" an onclick event handler from a button?

Say I have a button that was created dynamically after the DOM was loaded, it's part of a framework code so I can't change it and can't directly access that code.
This button has an on click event with internal state, I want to make another button later that will fire that same function.
If I add the same css classes as the original button to my button it doesn't work, probably because that button's onClick event isn't registered with jQuery but like this:
this.measureToolButton.onClick = function(e) {
self.enableMeasureTool(!self.tool.isActive());
};
So is there another way to "steal" that event from the original?

If you want the new button to perform exactly as if the original button had been pressed, you can just trigger the old button's handler:
$('#newButton').on('click', function() {
$('#oldButton').trigger('click');
});

How do I avoid one 'click' that triggers two functions?

Hi I have two JS functions:
$('button').click(function() inside $(document).ready
$(document).on('click','button', function()
the second function is design for buttons that I dynamically generated.
The problem I have is that when I click the button that associates with first function, the second function also gets triggered. How can I avoid this?
PS: since I give names to each button and this conflict is not affecting functionalities at all, but I think that one click trigger two function is not very smart :(

That is because of event propagation.
You can stop the event propagation in the first handler to prevent the dynamic handler from being fired.
$('button').click(function (e) {
e.stopPropagation();
//your code
})
But a more appropriate solution will be to add a common class to all the dynamic button elements and target only them with the delegated handler like
<button class="mydynamic"></button>
then
$(document).on('click','button.mydynamic', function(){
});

You can find documentation for event.stopPropagation() here

Wrap your dynamicly generated buttons into a div:
<div class="wrap">...buttons... </div>
and listen on the div:
$('.wrap').on('click','button', function(){});
It will be more efficent.

Anchor text that triggers onClick of a different element?

I have a page where content is spread over several tabs. The user clicks each tab (anchor inside an <li>) in order to switch. I would like to anchor some other text to trigger the onClick of a tab in order to also switch the content.
Is this possible with javascript/jquery?

Yes. You can invoke a click event on another element using jQuery's .click();
Trigger tab click
Where #tablink is the ID of the tab you want to trigger.
More info: http://api.jquery.com/click/

You can achieve that with Jquery which is simple and easy to use. what you can actually do is that , you can attach a event eg., click to a event handler, which would do the stuff like loading appropriate content on to your current tab.
well this can be achieved by attaching the event to the event handler using a selector. .on() function is used as per the latest jquery lib although .click() also would work but its advisable to use .on() as it handles event delegation as well.
Example:
$( ".tab a" ).on( "click", function() {
// load the appropriate content to the current clicked tab
});
REF:
http://api.jquery.com/on/
Jsfiddle to play with :
http://jsfiddle.net/dreamweiver/h4JXs/1732/
Happy Coding :)

Registering an existing event to ajax loaded DOM?

In my homepage , I have this button.
<button class="test">test</button>
And in my current code I have this script
$('.test').on('click',function(){
alert("YOU CLICKED ME");
});
Now, my application is ajaxified, so everytime I click a new page it is loaded as ajax, the problem is that the loaded page also has this button. and its markup is likethis
<div id ="firstDiv>
<div id ="secondDiv">
<button class="test">test</button>
</div>
</div
So the new content also has "#test" but how come when I click that button it does not execute the event handler I created?

var $bdy=$(document.body);
$bdy.on('click','.test',function(){
alert("YOU CLICKED ME");
});
now append your .test anytime you like

So the new content also has "#test" but how come when I click that button it does not execute the event handler I created?
Because the handler is attached to the actual element. So if the element is removed and a new element with the same class is created, the event is not associated with that new element.
You could use event delegation to handle this:
$(document.body).delegate('.test', 'click', function(){
alert("YOU CLICKED ME");
});
or
$(document.body).on('click', '.test', function(){
alert("YOU CLICKED ME");
});
(They do the same thing, note the order of arguments is different. I prefer delegate for the clarity, but I think most people use the delegating version of the far-too-overloaded on method instead.)
What that does is watch for the click on document.body, but only fire your handler if the click passed through an element matching that selector (.test, in this case).

As you said that the content is loaded through data you get in AJAX this is the possible scenario that is happening.
<button class="test">test</button> is drawn
Then it is binded to to click event
You load the new data through ajax
Try to bind that it does not.
This is because when you first bind the click event to "test" element with that class are part of the DOM. Now that you add some markup after ajax call the elements become the part of DOM, but now after you wrote the new markup you need to first unbind the click event See Here. And then re-bind the click event. This will bind the event to all elements having class "test".
P.S. I don't know the specifications of your implementation but as others have suggested you should bind events to id and not class.

I finally found out the solution. all I needed to do was define a static container which is this
$('#staticdiv').on('click','.test',function(){
alert("YOU CLICKED ME");
});
and that fixed the issue

Why does the click function not work after I change the class of a button?

I have a set of buttons(previous & next) that the user clicks.
<a id="prev_btn" class="prev_1" href="#">Previous</a>
<a id="next_btn" class="next_1" href="#">Next</a>
When the user clicks on the next button(.next_1), it changes the class name of the button to next_2 and changes the the previous button(.prev_1) to prev_2. Once the class name is changed, the click function that is set for prev_2 doesn't work.
$('.next_1').click(function() {
$('#next_btn').removeClass('next_1').addClass('next_2');
$('#prev_btn').removeClass('prev_1 inactive').addClass('prev_2');
});
$('.prev_2').click(function() {
alert('this works');
});
Why does the click function not work after I change the class using jquery?

That's because the bindings are defined at load. If you want them to work dynamically, bind teh click's via LIVE.
$('.prev_2').live('click', function() {
alert('hi!');
});

It sounds like you are confused about the time of evaluation here; $('.prev_2') gets all elements that currently have a class of 'prev_2', and applies a given action to them; it is not a declaration that stays in effect no matter which elements are added to or removed from this class.
If you want a handler that is based on class, you can register an onclick handler at the document level, and test the class of the event target and dispatch accordingly. However, it is cleaner just to register a click function with a specific button and, within that handler, test the class of the button before acting.

When $('.prev_2').click(...) is executed, the "previous" button does not have the prev_2 class, so it is not assigned the click handler, only thingas which currently have that calss when the .click method is called will have that handler bound.
You want to look at the .live jquery function to achive what you are looking for