I am having an odd problem with Safari and hiding a collection of
elements. I'm using jQuery 1.1.2 until 1.1.3 reaches release
quality.
The situaition is as follows: There is a fieldset in a form for
filling out addresses. If the browser is javascript-capable then this
fieldset is hidden and some new ones generated. The first holds a
single input for a postcode, the second one will list the results of
the lookup, as retrieved by an AJAX query. The fields in the hidden
fieldset will be loaded with the correct values based on the result
the user clicks on and the fieldset will then be shown again filled
out.
During initialization my script generates the new fieldsets with
before() and text strings. It also adds some text links to the
existing fieldset with append() for navigating through the inserted
fieldsets. Only one of the 3 fieldsets (lookup, results, address
fields) will be visible at any one time.
I have some code that looks something like this in my javascript:
var address = $('#address');
address.before ('<fieldset id="lookup"><!--input fields--><p><a
class="gotoaddr" href="#">Enter address</a> <a class="gotores"
href="#">Go to results</a></p></fieldset>')
address.before ('<div id="results'" style="display:none;"><!--results--
><p><a class="gotosearch" href="#">Search again</a> <a
class="gotoaddr" href="#">Enter address</a></p></div>');
address.append (<p><a class="gotosearch" href="#">Search again</a> <a
class="gotores" href="#">Go to results</a></p>);
addrlinks = $('.gotoaddr');
searchlinks = $('.gotosearch.');
reslinks = $('.gotores');
reslinks.click (function (){alert ('this is a test');});
reslinks.hide ();
address.hide ();
The problem only seems to happen in Safari 3 for Windows. Haven't had
a chance to try the Mac version yet. The problem is that all the
reslinks links get the click events attached, but only the one that
was appended to the "address" fieldset gets hidden. The one in the
"lookup" fieldset remains visible.
I know that jQuery is grabbing the element as it should because it
gets the event attached to it. Additionally the link that remains
visible in Safari is hidden in my other test browsers. I tried
console.log (reslinks.length) and got 2 back in all browsers, but one
of the links just does not hide in Safari.
I tried other approaches, such as creating the links with "display:
none" but then when the show() calls were made later in the script to
reveal the links they were given a style of "display: block" in spite
of the fact that I wanted them to be inline elements as they would be
by default. I could modify the script so that the calls to show
explicitly set "display: inline" with a callback, but then what
happens if the designer decides to style the links to be something
other than inline elements?
I'd really appreciate some feedback on this problem. If anyone else
has encountered it then please let me know.
