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.
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
Other posts you may like...