jquery - 点击按钮在 iDevices 上不起作用

Question

我有这个向下滑动的标题，当它被按下时它会向下滑动。

演示：http: //jsfiddle.net/ygAV2/2/

$(document).on("click", 'h1', function() {
    if (!$(this).parent().hasClass('header-down')) {
        $(this).parent().stop().animate({
            height: '100px'
        }, {
            queue: false,
            duration: 600,
            easing: 'linear'
        }).addClass('header-down');
    } else {
        $(this).parent().stop().animate({
            height: '30px'
        }, {
            queue: false,
            duration: 600,
            easing: 'linear'
        }).removeClass('header-down');
    }
});



$(document).click(function () {
    if ($(".box_header").hasClass('header-down')) {
        $(".box_header").stop().animate({
            height: '30px'
        }, {
            queue: false,
            duration: 600,
            easing: 'linear'
        }).removeClass('header-down');
    }
});

$(document).on("click", ".box_header", function (e) {
    e.stopPropagation(); // This is the preferred method.
    // This should not be used unless you do not want
    // any click events registering inside the div
});

标题和“删除我”按钮在计算机上工作正常，但在我的 iPhone 和 iPad 上不工作，有没有人尝试过这个？

Answer 1

试试这个（应该可以，在 iOS 模拟器上试过 - 没有设备）：

$('h1').on('click touchstart', function() {
    // ... your code 
});

Answer 2

我知道这是一篇较旧的帖子，但我发现 Mac OS 和 iOS 不允许您进行点击操作，除非相应的图层实际上是一个 html 按钮。

我在上周建立一个网站时注意到了这一点，移动菜单可以在 Windows 和 Android 设备上使用 span 进行切换，但 Mac OS 和 iOS 没有切换菜单。

第二次我将图层更改为实际的 html 按钮，它起作用了！

为此在 Apple 提供 Facepalm！

Answer 3

尝试使用.live()代替.on或.click：

$('h1').live('click', function() {
    // your code goes here...
});