Question

我有一个有趣的问题......我试图制作一个一次只能显示3列的表格，并且通过使用左右箭头可以隐藏右边的两列并显示另外两列隐藏的列，有效地滚动右侧的列。

我已经成功实现了这一目标：http://reach4urphone.com/player/weapons?gamertag=kit001（仅供参考：此代码不再用于此链接，我选择了更兼容的跨浏览器解决方案）。

问题是，虽然这适用于Chrome，IE9和Safari的最新版本，但它并不适用于我的iPhone4或iPad2（我的主要目标平台）。所以我认为可能有一个jQuery或移动Safari漏洞无法支持我的部分实现。这是我唯一的JQuery代码（注意我在第一行使用jQuery UI Tabs，每个选项卡的面板上都有一个表）：

$(document).ready(function () { $("#tabs").tabs(); });

$('#rightArrow').live('click', function () {
    var curr = $(this).closest('table').find('.selected');
    var next = curr.next().next();

    if (next.length === 0)
        next = curr.siblings(':first-child').next();

    curr.hide().removeClass('selected').next().hide();
    next.show().addClass('selected').next().show();
});

$('#leftArrow').live('click', function () {
    var curr = $(this).closest('table').find('.selected');
    var prev = curr.prev().prev();

    if (prev.length === 0)
        prev = curr.siblings(':last-child').prev();

    curr.hide().removeClass('selected').next().hide();
    prev.show().addClass('selected').next().show();
});

全部谢谢。

Answer 1

您发布的代码实际上与您提供的链接上的源代码不同 - 在onmouseup事件处理程序中没有jQuery绑定，您在网站上使用以下代码：

var curr = $(window.event.srcElement).closest('table').find('.selected');

这在Firefox中不起作用。尝试将其更改为帖子中的代码（改为使用此对象），我们将从那里进行调试。

Answer 2

好的，对于那些遇到同样问题的人，我已经找到了一些解决方案。就像我说的，jQuery live（）与移动Safari的兼容性不如此处报告的bug： http://bugs.jquery.com/ticket/5677

以前我使用jQuery click（）方法将处理程序绑定到click事件，但是因为我使用AJAX生成了一些内容，所以我需要使用live（）来注册插入到新内容中的click处理程序DOM。

因此，在jQuery团队处理这种情况之前，我只是添加了：

onclick="functionName(this)"

到我的右箭头和左箭头按钮，它们调用相应的函数并给我一个被点击箭头的引用。正如Christian指出的那样（谢谢），所有浏览器都不支持使用window.event.srcElement。最后，我意识到这不是“不引人注目的JavaScript”方式，但我不是JavaScript专家，它现在至少可以做到。

我的网站@ http://reach4urPhone.com/player/weapons?gamertag=kit001

上提供了完整的资源

jQuery / mobile Safari bug？

2 个答案: