iPhone Safari Vs PC Safari

Question

This js-code works in safari on my pc, but not on a ipod touch safari (has also tested it on a iphone - still not working).

$(document).ready(function(){

                $.ajax({
                type: "GET",
                url: "list.xml",
                dataType: "xml",
                cache: false,
                success: function(xml)
                 {              
                    $(xml).find('Lights>Light').each(function(){                        
                        var lightname = $(this).attr('Name');                       
                        $('<li><a href="#lightssubmenu" onclick="lightdata()" \')">'+lightname+'</a></li>').appendTo('#lightitems');
                    });
                }
            });

        });


        function lightdata()
        {
            alert("entered lightdata");             
        }

The code parses xml and dynamically creates html. My alert is not shown on the ipod touch - other test alerts are shown just fine. So the function call to lightdata must NOT occur for some unknown reason (hense this question ;o) ) when i am running this on the ipod touch. What are the possibillities of debugging in safari on a handheld device? i am looking for something like firebug - just for the iphones safari instead for firefox. The debug console in mobile safari shows no errors. Any advice / tips would be appreciated.

Answer 1

Since I don't have your XML to test, I am going out on a limb and saying the problem is the extra characters \')" you have in your HTML code:

Change this line:

$('<li><a href="#lightssubmenu" onclick="lightdata()"   \')">'+lightname+'</a></li>').appendTo('#lightitems');

To this:

$('<li><a href="#lightssubmenu" onclick="lightdata()">'+lightname+'</a></li>').appendTo('#lightitems');

Additionally, you should change the way you are handling events and attach them outside the inline onclick handler. Here is your code, shifted around a bit:

$(document).ready(function(){
    var lightItems = $('#lightitems');

    lightItems.delegate('a','click', function(e){
      e.preventDefault();
      lightdata();
    })

    $.ajax({
        type: "GET",
        url: "list.xml",
        dataType: "xml",
        cache: false,
        success: function(xml) {              
            $(xml).find('Lights>Light').each(function(){                        
                var lightname = $(this).attr('Name');                       
                lightItems.append('<li><a href="#lightssubmenu">'+lightname+'</a></li>');
            });
        }
    });
});


function lightdata()
{
    alert("entered lightdata");             
}

Note: this requires jQuery 1.4.2+