Clever Geek Handbook

JQuery and Safari

I have a problem with JQuery and Safari (Windows version). The code works on FF / IE7 / Chrome but not Safari.

I have a simple <li>

one that has <div>

built in - clicking <li>

should open the hidden one div

, but not in Safari.

HTML:

<ul>
<li>something</li>
<li>something2</li>
<li class="more">
        <a href="" class="moreFacetsLink">Click to see more options</a>
        <div class="moreFacets">bunch of text</div>
</li>
</ul>

Here is the JQuery code:


     $('.moreFacetsLink').click(function () {

        $(this).siblings('div').toggle();
     });

Any thoughts on what might be going on here? Again - this seems to work on all other browsers!

I am a newbie when it comes to JQuery.

Thank!

+1


source to share


4 answers


How accurate is your HTML insertion?

You have never closed the "moreFacetsLink" anchor tag, which probably makes Safari think it is implicitly closed, and the "bunch of text" is surrounded by an additional, unclosed HREF unclosed anchor tag ... proof that this is:

$(".moreFacetsLink").click(function () {
    $(this).siblings("a").children("div").toggle();
});


... does what you want with the provided markup.

Close your anchor tag correctly (bonus points for including the href attribute) and you should be good to go.

+1


source


href = "" reloads your page in safari

I would try to use css to underline and style it, and omit the empty href.



0


source


I'm pretty sure what you need return false;

from the click function to cancel the link.

0


source


You first need to check if the browser is doing a postback and if it is true you can avoid it like this.

$('.moreFacetsLink').click(function (e) {
    e.preventDefault(); // this prevent postback

    $(e.target).siblings('div').toggle();
});

try $(e.target)

this, $(this)


it might be another way instead .

hope this helps

0


source






More articles:


All Articles