We Keep Coding

removing a placed jquery click event listener after initial click

Got some simple functionality set up on a page. Initially I want to replace default action of a hyperlink click with some functionality which will display an overlay.
After the overlay is displayed I want to remove the event listener I have placed on the hyperlink so it reverts to what it was previously (i believe there is another event listener on here, I dont want to remove this one while removing mine). Within the overlay is another button which when clicked, should trigger the initial functionality of the button.
Ive tried the .off() jquery method, however this seems to prevent the ".mmclose" button from working.
Not quite sure where i am going wrong with this..
// placing event listener on initial link
$("#utility_0_HyperLinkLogout").click(function() {
// removing event listener(?)
$("#utility_0_HyperLinkLogout").off("click");
// preventing default button behavior
event.preventDefault();
//overlay replacing original content
I62originalContent.hide();
$("#mmi62wrapper").fadeIn("slow", function() {
// new event listener placed on button within overlay (as callback)
$(".mmclose").click(function() {
//new button should now trigger original buttons original functionality?
$("#utility_0_HyperLinkLogout").trigger("click");
})
})
});

You can use jQuery .one method to attach a handler which will be executed only once. You don't need to worry about removing this handler anymore.
Check this example:
$(".myClass").click(function() {
this.innerText += "!";
});
$("#myId").one('click', function() {
this.innerText += "?";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myClass" id="myId">Click me twice</button>
In this example, clicking the button keeps adding "!", while "?" is only added once. Other handlers are not affected.

First click handler removes element and second handler doesn't run, how can I run both?

I'm using a jQuery plugin (leaflet.js) that has popups. I want to do some stuff when the close button is clicked, but since I'm not the one creating the close button, I have to attach a handler with jQuery.on() like so:
$(document).on('click', '.leaflet-popup-close-button', function () {
// do stuff
}
This works for other events (such as mouseover), but because it's a close button I'm clicking, the element disappears the instant it's clicked, and my handler isn't run.
How can I make my handler ALSO run (I don't want to remove the handler that's already there)?
edit
I can't use the built-in popupclose event because that event also fires if the popup is closed some other way.

I'm not very familiar with leaflet, but I think you need to set the closeButton option to false, edit the DOM of the popup with your own close button, and have the callback for the click event call togglePopup or closePopup after whatever other code you want.

I'd suggest listening for a close event from the leaflet.js and use that to trigger your action:
http://leafletjs.com/reference.html#popup

Change onmouseover command with onclick event

I have the following line in my page:
<div id="fmeFriendStatus" style="width:589px;height:700px;overflow:auto" onmouseover="DelayedStatusRefresh()">
I want to be able to change:
onmouseover="DelayedStatusRefesh()"
command to:
onmouseover="DelayedStatusRefeshFriends()"
by clicking on a button elsewhere on the page...
Is this possible and how would you do it?
Many thanks in advance

The quick answer is as follows:
var button = document.getElementById('someButtonId');
button.addEventListener('click', function() {
document.getElementById('fmeFriendStatus').onmouseover = DelayedStatusRefeshFriends;
});
However, directly accessing onclick or other on* properties to listen for events is frowned upon for numerous reasons. Ideally, you would add DelayedStatusRefesh as an event listener using addEventListener() (or maybe using a JavaScript library, like jQuery), and when the button is clicked, remove that listener (removeEventListener()) and add the other.

You need to add the onclick handler to the second button, and its handler needs to reassign the mouseover handler for the fmeFriendStatus element.
So it should be something like this:
document.getElementById("buttonFromSomewhereElse").onclick = function() {
document.getElementById("fmeFriendStatus").onmouseover = DelayedStatusRefeshFriends;
}

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

Problem with jquery button click

I am facing a problem in the jquery click event.
My web page involves creating a button through javascript and assigning a class to the button ( call it A ). Now I want to detect the click of that button and I have written the following code for it :
$(".A").click( function () {
// do something
});
To my surprise, this click event never gets called.
But when I make the button statically on the webpage ( during design time ), the same code works.
Is there a different approach to bind a button click with jquery in case a button is created dynamically?

You need to use $.live
$(".A").live('click', function () {
// do something
});

Have a look at the live() jquery method to automatically wire up events to new elements. Or, as you create the new button, attach the new click event.
var newbutton = $('<input type="button" value="click me"/>');
somediv.append(newbutton);
newbutton.click(yourhandler);

Your event handler fires at page load, before your button exists.
Either reset the event handler after you create the button, or use .live for late-binding:
$(".A").live('click', function () {
// do something
});
Now the handler will apply to .A even created in the future.

you have to use the live-function of jquery! In difference to the click-function, it watches for dom manipulations. as you can imagine its slightly slower than the .click().
$('.clickme').live('click', function() {
// Live handler called.
});
Felix