Toggling jQuery function not working on Safari Mobile_问答_开发者

Toggling jQuery function not working on Safari Mobile

开发者 https://www.devze.com 2023-01-19 09:05 出处：网络

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

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 we开发者_开发问答ther 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.

So someone on StackOverflow advises me to use the toggle function and that is what I did:

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

I tried your function: It works perfectly on desktop browsers (chrome, safari) but on Safari for iPhone it did what I described: Shows and hides the hidden element instantly.

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

I just wrote a demo program (see below) and it ran fine on desktop Firefox, Safari in iPhone Simulator, and iPad Safari. Perhaps you want to make sure that the click event is not captured by multiple event listeners.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#showHide').click(function(e) {
        $(this).parent().next().toggle('slow');
    });
});
</script>
</head>

<body>
<ul>
  <li><input type="button" value="show hide" id="showHide" /></li> 
  <li><input type="text" value="ok" /></li>
</ul>
</body>
</html>