jQuery event.target always refers to the element that triggered the event, where 'event' is the parameter passes to the function. http://docs.jquery.com/Events_(Guide)
$(document).ready(function() { $("a").click(function(event) { alert(event.target.id); }); });
If the <a> that is clicked were a game element, such as an ace card, the card could tell you "I am an ace of spades" for your code to do what ever.
$( this ).addClass( "hilite" );
$( this ).removeClass( "hilite" );
.find( ":contains('t')" )
Setting an event handler is not too difficult, but what about removing the event. I don’t want the user to be able to hit the button more than once and still fire the function. the only way that was working was to disable the button or hide it. I finally found the technique that really works for me. The prop() is a powerful function with untold uses. Dealing with checkboxes seems to be something that would merit its own post. http://api.jquery.com/prop/
Here is a great way to remove a click event that you put inline:
<A href=”#” onclick=”mycoolfunk()” id=”thisbut”>my button or link</a>
$(‘#thisbut’).prop(“onclick”, null);
Update: I have been fighting with finding the best way to remove a click event from the button so the user cant hammer on it repeatedly. None of my solutions were working effectively in all situations: like actions on a submit button are harder to remove than ones on a link.I couldn’t get the submit to submit to my will. I wanted to hide it onclick, not happenin. remove click event, not workin either. What the hell should I do?
Well, enter the .one() — thats right. http://api.jquery.com/one/ The jquery docs have a function to only put one click event onto an object. This is perfect for a submit where we don’t want the user to be able to repeatedly press the figgin button cause they think everything should be so instantaneous. LOL.
But what about handling multiple events. I have been looking for this for years… We have the $( document ).on( "click", "#demo-page", function( e ) {alert(e.type)}); alerts(‘click’)
Well here’s how to handle multiple events with one on call:
$( document ).on( "click press swipeleft swiperight", "#demo-page", function( e ){
alert(e.type);
if ( e.type === "swipeleft" ) {// do something only on swipeleft}
});// end doc.on funk
I will write up a demo page with this script so I can test it out and do stuff with events.
Using delegated events to allow dynamic elements to have the event handler.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
Lets take for example the diploma application I am working on. I have some buttons that have styles and actions that need to be called, but the buttons are not in the dom until and unless the user accesses that particular step of the application. How do I assign the events and styles to non-existing buttons. I had tried a few various solutions before I read about this. Now lets go for this approach. I will delegate the event to the form element. That way, any dynamically added elements will still get the mouseover and mouseout effects.
$(“#diplomappform”).on(“mouseover mouseout”, “[name=’stepUpButton’]”, function(e){
if(e.type==”mouseover”){
$(this).removeClass(“blackouterstrokesmall”).addClass(“boldfont blackouterstrokemedium insetborder whitetextglowtight”);
}
if(e.type==”mouseout”){
$(this).removeClass(“boldfont blackouterstrokemedium insetborder whitetextglowtight”).addClass(“blackouterstrokesmall”);
}
});
Sometimes if you have a mouse over event, the mouse out event will trigger accidently too early. Peter has worked out a fix for this: make a function to call the mouse over function instead of putting an anonymous function directly into the event.
var qlinkTrigger = function() {
$(“#qlink-box”).slideDown(“slow”, function() {
$(this).clearQueue();
});
}
$(“a#qlink-trigger”).hover(qlinkTrigger).click(qlinkTrigger);
$(“#qlink-box”).mouseleave(function() {
$(this).slideUp(“slow”);
});
$(“a.close-qlinkbox”).click(function() {
$(“#qlink-box”).slideUp(“slow”);
return false;
});
