3-Aug-2016
NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the
FAQ for more details.
While I was working on a
jQuery UI plugin I'm writing, in my haste to get it going I made a simple mistake, which was forgetting the fundamental principle of how
jQuery works with it's selectors. My aim was to create a new
Image instance, apply my
jQuery UI plugin to it, which
wraps that image in a
DIV and then add the
DIV to the
DOM.
My plugin id is
'photoboxr' and so my code looked something like this...
Seems simple enough but nothing worked and instead I got a lot of flickering when my web page loaded. I was confused at first.
Then, I realised that I was doing this:
$('img'). The intent was of course to create a new
Image node, but the reality of running that was to select all existing
'img' elements in my web page. The rest of the code then applied my plugin to all those images and hence caused the flickering and the same repeating image all over the place.
That was a big oops! In case my explanation above is not clear,
jQuery was simply interpreting my code by running its
Element Selector.
The fix is easy, create a new
Image HTML object and pass that to
jQuery instead. Derp. The code now became..
After that everything worked perfectly! Simple mistake, but easy to fall for.
-i
A quick disclaimer...
Although I put in a great effort into researching all the topics I cover, mistakes can happen.
If you spot something out of place, please do let me know.
All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle).
Use of any information contained in this blog post/article is subject to
this disclaimer.
Igor Kromin
Other posts you may like...