jquery's on binding event is not available on mobile Safari (iphone/ipad/ipod) solutions

Source: Internet
Author: User

Use a div as a button.

<div class= "button" >    <div class= "Next_button button_left btn_red" style= "width:345px;" >    Next    </div></div>

Because it is a dynamically added content, to use the Click event, you need to bind him with on:

$ (document). On ("click", ". Next_button", function () {    alert ();});

This time, when using the Apple mobile phone to visit, found a problem, such as how to click on the "Next", there is no response, but in Android and all kinds of simulator all normal. Later after looking for information to know, Apple has this setting:
For the clicked object, has the Cursor:pointer this style the setting, namely, the mouse puts up, can appear "the Hand" the type icon to be considered can use the Click event, therefore decisively added the style

<style>    . next_button{        cursor:pointer    }</style>

 

Reason:

The bubbling event is standard, and jquery's on event is no problem.
The problem is that you're going to write a CSS style to your DOM Cursor:pointer
Because Safari thinks this is a clickable area, so that it is more friendly, it will allow you to click, and you can tap, you can bind.

Or you are a <a> tag, and then the <a> tag is only the tag, your <a> tag with on binding Click event is also possible, the other tags are ignored click.

Or you can use tap event, or you directly imitate the click, press the more than 300 milliseconds to trigger all is possible.

Hopefully my answers can help other small partners who develop web-mobile

Bo Bo
Links: https://www.zhihu.com/question/23689377/answer/48964971
Source: Know
Copyright belongs to the author, please contact the author for authorization.

jquery's on binding event is not available on mobile Safari (iphone/ipad/ipod) solutions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.