Databases
StackOverflow2013
Postsdbo
POjQuery plugin function does not work in Firefox...but works in IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery plugin function does not work in Firefox...but works in IE
    text
    copied!<p>I have a html file which refers to a .js file. The js file has a jQuery function defined as a plugin. There are a few hyper-links in the html file..which when clicked should expand showing detailed description (which is hidden on the page). Now this arrangement works under IE8 but does not on Fire Fox. I initially had Firefox 3.6.13 ....and upgraded it to Firefox 4...it did not work for either versions. Here is a dummy html file(to keep it simple) and .js file contents</p> <p>HTML:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; span { background:#def3ca; padding:3px; float:left; } &lt;/style&gt; &lt;script src="http://code.jquery.com/jquery-1.5.js"&gt;&lt;/script&gt; &lt;script src="path/to/jquery/file/jquery.compand.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="100%" border="0" cellspacing="5" cellpadding="5"&gt; &lt;tr&gt; &lt;td width="13%" valign="top"&gt;Job Code&amp;nbsp;&lt;/td&gt; &lt;td width="87%" valign="top"&gt;Job Title&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="top"&gt;2223&amp;nbsp;&lt;/td&gt; &lt;td valign="top"&gt;&lt;a class="click" id="2223" href="#"&gt;Systems Analyst &amp;nbsp;&lt;/a&gt; &lt;div class="text" id="2223text"&gt;&lt;span&gt;This text was hidden before.&lt;/span&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;script&gt;$(".click").compand();&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and here is my js file containing jQuery plugin defining compand() function.</p> <pre><code>(function( $ ){ $.fn.compand = function(){ return this.click(function() { alert('item id: '+this.id); $("#"+this.id+"text").toggle("slow"); }); }; })(jQuery); </code></pre> <p>What further surprises me is if instead of having a .js file I have the following code embedded in html file between tags....it works well on Firefox and IE8 both. Here is the script:</p> <pre><code>&lt;script&gt; $('.click').click(function() { // get id of the clicked item alert('id clicked: ' + this.id); $("#"+this.id+"text").toggle('slow', function() { alert('Animation complete.'); }); }); &lt;/script&gt; </code></pre> <p>I require to have this function as a jQuery Plugin so that I do not replicate the above code on several html pages. Thanks for reading so far! Any pointers appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload