jQuery/mobile Safari bug?

I have an interesting problem... I'm trying to make a table which only shows 3 columns at a time, and via the use of left and right arrows can hide the two right columns and show 2 more of the hidden columns, effectively rolling through columns on the right.

I've been successful in achieving this here: http://reach4urphone.com/player/weapons?gamertag=kit001 (FYI: this code isn't used at this link anymore, I went for more compatible, cross-browser开发者_StackOverflow中文版 solution).

The problem is, although this works in the latest versions of Chrome, IE9 and Safari, it doesn't work on my iPhone4 or iPad2 (my main target platforms). So i'm thinking there is perhaps a jQuery or mobile Safari bug not supporting part of my implementation. Here is my only JQuery code (note that I'm using jQuery UI Tabs in the first line, each of which has a table on its panel):

$(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();
});

Thanks All.

The code you posted is actually different to the source on the link you provided - Amongst onmouseup event handlers and no jQuery binds, you're using the following code on your site:

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

This does not work in Firefox. Try changing this over to the code in your post (using the this object instead), and we'll debug from there.

Okay, I've come to somewhat of a solution for those who come across the same problem. Like I said, jQuery live() is not very compatible with mobile Safari as bug reported here: http://bugs.jquery.com/ticket/5677

Previously I was using the jQuery click() method to bind the handler to the click event however since I am generating some of my content with AJAX I needed to use live() to register the click handler on new content inserted into the DOM.

So until the jQuery team handles this situation I've simply added:

onclick="functionName(this)" 

to my right and left arrow buttons which call the appropriate functions and give me a reference to the arrow that was clicked. As Christian pointed out (thank you) using window.event.srcElement is not supported by all browsers. Finally, I realise this is not the "Unobtrusive JavaScript" way but I'm no JavaScript expert and it'll do for now at least.

Full source is available on my website @ http://reach4urPhone.com/player/weapons?gamertag=kit001