https://hugo.curtiscode.dev/tags/jquery/Recent content in jquery on Curtis TimsonHugo -- gohugo.ioen-GBMon, 05 May 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/namespacing-jquery-event-handlers/Mon, 05 May 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/namespacing-jquery-event-handlers/If we are to attach 2 or more event handlers to an element these will become stacked and run linear in the order they were attached. For example: $(".foo").on("click", function(e){ console.log("bar"); }); $(".foo").on("click", function(e){ console.log("baz"); }); If .foo is then clicked, the browser console will log: "bar" "baz" If we wish to remove these event handlers we can call: $(".foo").off("click"); Simple. However, what if we wish to only remove 1 of these event handlers and retain the other?https://hugo.curtiscode.dev/post/jquery/understanding-jquery-data-storage/Tue, 14 May 2013 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/understanding-jquery-data-storage/It is a common misunderstanding that .data("key") is simply a shortcut for .attr("data-key"). .data() does read HTML5 data attributes, but this is only the first time it is called, as per the documentation: The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery). After they’ve been read once, they are then stored in jQuery’s cache object, $.https://hugo.curtiscode.dev/post/jquery/creating-a-new-rule-for-a-css-class-in-jquery/Sun, 07 Oct 2012 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/creating-a-new-rule-for-a-css-class-in-jquery/In jQuery, to add a new style to all elements which have a particular CSS class, we can simply call a function like the following: <div class="foobar">Lorem Ipsum</div> <div class="foobar">Dolor sit amet</div> function SetFooBarRed(){ $(".foobar").css("background-color", "red"); } This will add the style background-color:red to all elements with the class foobar. <div class="foobar" style="background-color:red;">Lorem Ipsum</div> <div class="foobar" style="background-color:red;">Dolor sit amet</div> However, if we have elements which are loaded into the DOM after the initial page load, then these new elements will not have the new style automatically added to them (as they were not included within the DOM when SetFooBarRed() was called).https://hugo.curtiscode.dev/post/jquery/using-jquery-callback-functions/Sun, 05 Aug 2012 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/using-jquery-callback-functions/I’ve heard questions in the past regarding how to run a script after a jQuery animation or event has been completed. The majority of these believe that you need to delay the script for a few seconds, allowing the animation to complete before the 2nd function is called. For example: $foo.load("MyWebPage.html"); $foo.delay(1000).css("color", "red"); Here, the jQuery object $foo is being loaded with a web page’s content, then while this is happening a delay of 1000 milliseconds is set, before the css colour is changed to red.