You can try out the following example from the jQuery doc page. It’s a nice little, interactive demo that makes it very clear and you can actually see for yourself. var i = 0; $(“div.overout”) .mouseover(function() { i += 1; $(this).find(“span”).text(“mouse over x ” + i); }) .mouseout(function() { $(this).find(“span”).text(“mouse out “); }); var n … Read more
Case 1 (direct): $(“div#target span.green”).on(“click”, function() {…}); == Hey! I want every span.green inside div#target to listen up: when you get clicked on, do X. Case 2 (delegated): $(“div#target”).on(“click”, “span.green”, function() {…}); == Hey, div#target! When any of your child elements which are “span.green” get clicked, do X with them. In other words… In case … Read more
There is a difference between $(this) and event.target, and quite a significant one. While this (or event.currentTarget, see below) always refers to the DOM element the listener was attached to, event.target is the actual DOM element that was clicked. Remember that due to event bubbling, if you have <div class=”outer”> <div class=”inner”></div> </div> and attach … Read more
Use this. You can replace body with any parent element that exists on dom ready $(‘body’).on(‘click’, ‘#my-button’, function () { console.log(“yeahhhh!!! but this doesn’t work for me :(“); }); Look here http://api.jquery.com/on/ for more info on how to use on() as it replaces live() as of 1.7+. Below lists which version you should be using … Read more
Nope. Once the event has been canceled, it is canceled. You can re-fire the event later on though, using a flag to determine whether your custom code has already run or not – such as this (please ignore the blatant namespace pollution): var lots_of_stuff_already_done = false; $(‘.button’).on(‘click’, function(e) { if (lots_of_stuff_already_done) { lots_of_stuff_already_done = false; … Read more
$(‘body’).click(function(){ alert(‘test’ )}) var foo = $.data( $(‘body’).get(0), ‘events’ ).click // you can query $.data( object, ‘events’ ) and get an object back, then see what events are attached to it. $.each( foo, function(i,o) { alert(i) // guid of the event alert(o) // the function definition of the event handler }); You can inspect by … Read more
Core jQuery doesn’t have anything special for touch events, but you can easily build your own using the following events touchstart touchmove touchend touchcancel For example, the touchmove document.addEventListener(‘touchmove’, function(e) { e.preventDefault(); var touch = e.touches[0]; alert(touch.pageX + ” – ” + touch.pageY); }, false); This works in most WebKit based browsers (incl. Android). Here … Read more
Use the trigger() method $(selector).trigger(“change”);
Whenever you change a class in your script, you could use a trigger to raise your own event. $(this).addClass(‘someClass’); $(mySelector).trigger(‘cssClassChanged’) …. $(otherSelector).bind(‘cssClassChanged’, data, function(){ do stuff }); but otherwise, no, there’s no baked-in way to fire an event when a class changes. change() only fires after focus leaves an input whose input has been altered. … Read more
Check the complete and naturalWidth properties, in that order. https://stereochro.me/ideas/detecting-broken-images-js function IsImageOk(img) { // During the onload event, IE correctly identifies any images that // weren’t downloaded as not complete. Others should too. Gecko-based // browsers act like NS4 in that they report this incorrectly. if (!img.complete) { return false; } // However, they do … Read more