Safari for iPhone can't evaluate correctly jQuery ?!

Question

Hi everybody,

I'm trying to make work a functionality that exists on my website but works bad on Safari for iPhone.

Well, I have a "li" element:

..
    <li><input id='showOrHide' type='button' value='show or hide'/></li>
    <li><input type='text' value='ok'/></li>
..

When I click on the 'show or hide' button, the text input should appear or disappear.

Then, I have a jQuery function that binds the click:

$("#showOrHide").click(function(){
  if($(this).parent().next().is(':visible'))
    $(this).parent().next().hide('slow');
 else
    $(this).parent().next().show('slow');
});

The problem is that, if the element appears, Safari hides it then shows it.

So I think that Safari checks wether the element is visible or not. If it's visible, it hides it, then go to the "else" selection. There, it checks if the element is visible or not. It will find the it's not visible, then will make it appear.

Is there a solution for that without using an extrernal javascript framework (but jQuery) ?

Thanks, Regards

Answer 1

Well, you could make the code a lot simpler by using the jQuery toggle function to show/hide the element.

Not sure if that would fix the issue you are seeing...

The code would then be:

$("#showOrHide").click(function(){ 
  $(this).parent().next().toggle('slow');
});