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;
}
Related
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');
});
i'm creating an application where a user can make a html layout and attach javascript to it.
Now i'm trying to make it so when they click a button, they go to a preview mode where they can see it in action.. so when they click i add the javascript tag ( with their javascript) in the head of the iframe.. this all works fine!
But the problem is when they leave the preview mode, i remove the javascript tag, however when i have code like this:
$('#button').click(function()
{
alert("ok");
});
it still alerts ok when i click the html button (when not in previewmode!), which shouldn't happen!
It seems that when removing the javascript tag, the listeners aren't removed.. Or am i doing it wrong?
Now my question: is there a way to make it so these added eventlisterens are removed when i remove the script tag?
AND YES: i know you can remove eventhandlers with .off(), but since i already have event handlers attached, these will be removed also, and i don't want this!
So two options i can think off:
- rebuild the whole iframe
- store the eventhandlers that were added by the user and when leaving the preview mode, removing them.
Thanks in advance
Each time you "evaluate" JavaScript, it becomes part of the browser's "image", and whether the source is present on the page no longer matters. You need to manually unbind the event, or replace the html segment to which the event was bound.
To remove events from an html element, you can use:
element.parentNode.innerHTML = element.parentNode.innerHTML
This rebuilds the DOM tree using the same HTML.
you need to unbind event.
You can do it by using jquery unbind() or off()
like this:
$("#button").unbind("click");
or
$("#button").off("click");
Demo: http://jsfiddle.net/a6NJk/664/
jquery Doc: http://api.jquery.com/off/
Another good answer: Best way to remove an event handler in jQuery?
Set the event:
var $button = $('#button');
$button.on("click", function() {
alert("ok");
});
Take off the event:
$button.off("click");
You can take off that specific function too
var $button = $('#button');
var eventFunction = function() {
alert("ok");
});
// Set event up
$button.on("click", eventFunction);
// Take event off
$button.off("click", eventFunction);
If you want to remove all events from an element you can use
$("#yourSelector").off()
Because it's not jQuery in general but also vanilla javascript, it would be too much work to keep track of javascript changes, so rebuilding the iframe would be the best option here.
I have a button with a click event (from a 3. party library) which submits a form. I like to remove the click event, add my own function and call the original event after a validation.
I thought i just add an event.stopImmediatePropagation(); but that did not work. Maybe because of the order the events where added(?).
Is the another way to manage the event execution?
Or how can I get the old event to do something like this:
originalClickEvent = $('#button').doSomeMagicAndGetTheEvent('click');
$('#button').unbind();
$('#button').bind('click', function (event) {
if (valid()) originalClickEvent();
});
Look here Remove all JavaScript event listeners of an element and its children?
After you remove the event listeners you can attach your custom event.
If I've understood you correctly this is the effect you're searching for: http://jsfiddle.net/ftGHq/
In case the click event is just bound to one function you could overwrite that function:
var oldFunction = theOldFunction;
function myFunction(control) {
oldFunction(control);
}
$('#button').unbind();
$('#button').click(myFunction);
Javascript is not my speciality.
I have a page that contains an image. This image, when clicked, fires an Ajax code, that shows a floating box. Analyzing the page code, I don't see how this button can fire the code.
The button is declared like this:
<div class="leaderboard-text">
<span id="addon-add-language-button">
<image class="ajaxListAddButtonEnabled" listId="localizationList"
src="/itc/images/blue-add-language-button.png" />
<image class="ajaxListAddButtonDisabled" listId="localizationList"
style="display:none;"
src="/itc/images/blue-add-language-button-disabled.png" />
</span>
</div>
just after this code, I see this var being declared:
<script language = "Javascript">
var createList_localizationList = function() {
var reorderEnabled = false;
var preventLastRowDeletion = false;
var searchEnabled = false;
var list = new LCAjaxList();
list.initialize():
}
document.observe("dom:loaded", createList_localizationList);
</script>
As far as I see, the image is firing somehow this javascript, but how can the button do that if there's no "onclick" or href reference tied to it? Where is the line that tells which method should run when the image is clicked?
What should I look on the code to get a clue how this button works?
What I need is to fire the method used by this button using javascript.
any clues?
================
after reading all that you guys have written, I have used Safari's Inspect Element and identified this listener attached to the object:
is this of any help? Now the question: how do I fire the method associated with this image from javascript? Thanks guys.
My guess is that it's either one of the two statements
var list = new LCAjaxList();
list.initialize():
They seem really bad designed. A list object should take a DOM object to act upon. LCAjaxList probably hardcodes the element to bind to.
What you're looking for is .observe. That adds an event listener, so somewhere there may be
$('addon-add-language-button').observe('click', SomeFunction)
Event listeners are the preferred way to handle javascript events, rather than using an HTML onClick.
When the DOM is completely loaded on the page it fires the event listener "createList_localizationList", so there is no need for a user to click on anything. You can add an event liseter to the button for onclick, instead of when the DOM loads with your button.
You could try this:
$('ajaxListAddButtonEnabled').observe('click', createList_localizationList);
I am not sure if that class is used again, but maybe if you add an id to that element (id='someidname') to make sure you are not adding this to another element on the page.
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