jQuery plugin function does not work in Firefox...but works in IE
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
HTML:
<html>
<head>
<style>
span { background:#def3ca; padding:3px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="path/to/jquery/file/jquery.compand.js"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="13%" valign="top">Job Code </td>
<td width="87%" valign="top">Job Title </td>
</tr>
<tr>
<td valign="top">2223 </td>
<td valign="top"><a class="click" id="2223" href="#">Systems Analyst </a>
<div class="text" id="2223text"><span>This text was hidden before.</span></div>
</td>
</tr>
<script>$(".click").compand();</script>
</body>
</html>
and here is my js file containing jQuery plugin defining compand() function.
(function( $ ){
$.fn.compand = function(){
return this.click(function() {
开发者_运维知识库 alert('item id: '+this.id);
$("#"+this.id+"text").toggle("slow");
});
};
})(jQuery);
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:
<script>
$('.click').click(function() {
// get id of the clicked item
alert('id clicked: ' + this.id);
$("#"+this.id+"text").toggle('slow',
function() {
alert('Animation complete.');
});
});
</script>
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.
(function( $ ){
$.fn.compand = function(){
return this.click(function() {
var openID = jQuery(this).attr("id");
$("#"+openID+"text").toggle("slow");
});
};
})(jQuery);
What about this approach and what errors do you get?
I have found a reason for this behavior and its quite embarrassing for me to mention how I messed. Luceos thanks for your inputs!.. they have certainly helped me.
After another day of breaking my head over it...I figured out that the path-to-jquery plugin was something that Firefox was finding hard to figure out. Let me explain it here: I had the following setup. I had both .html and .js file on my Desktop and as you can see below I provided fully-qualified-path to point to my jQuery function.
<script src="C:\\Users\\******\\***\\testjQuery\\jquery.compand.js"></script> (Windows separator)
OR
<script src="C:/Users/****/****/testjQuery/jquery.compand.js"></script>(Unix separator)
IE8 is able to figure both and pick up the .js file correctly but FireFox (3.6.13 and 4.0)did not.
Instead when I provided a relative path i.e. in the same context:
<script src=jquery.compand.js"></script>
(since my .html and .js file are exactly in same folder) Now this works on both FireFox and IE 8
加载中,请稍侯......
精彩评论