Href in output code causing $getJson() function to try to load up a file with href in url

Href in output code causing $getJson() function to try to load up a file with href in url

Hi,

I'm using the following code (simplified version) to call a Json file, parse it and on each iteration, create a div with an ID of "tab". I'm using this with jQuery UI .tab() to create a listing with entries which have three tabs. Anyhow, the principle seems to work except that when I examine what's happening behind the scenes using Firefox console, I see that each href in the html code produced is causing the Json function to re-fire using the href as it's url target. Seems really strange behaviour to me but I'm just a newbie at this. Can anyone help with this please. I'm including my code plus a url where you can check the behaviour for yourself,

many thanks,

Mike
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Search page</title>
            <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
            <link type="text/css" href="main.css" rel="stylesheet" />
            <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
          <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
    function initialize() {
       // Set vars for incoming file
        var url = 'http://www.corporaterentalsbenelux.com/crbsearch/example.json';
       var propInfo = '';
        $.getJSON(url,function(json){
            $.each(json.data,function(i,item){
                propInfo +=  '<div class="tabs"><ul><li><a class="tabheader" href="www.hello.com">Intro</a></li><li>More information</li><li>Photo album</a></li></ul><div id="intro'+item.title+'"><h3>'+item.title+'<p>'+'</p></div><div id="more'+item.title+'"><p>info here</p></div><div id="photos'+item.title+'"><p>info here</p><p>info here</p></div></div>';
            });
              $("#results").html(propInfo);
             $(".tabs").tabs();
        });
    }
    </script>
    </head>


    <body onload="initialize()">

    <div id="results">results here...</div>

    </body>

    </html>
































Here is a link to the test file (with no .tab() function):
Test file without .tab() function
Here is a link to the test file (with the .tab() function included) - note in your console the extra calls to the json file:
Test file with .tab() function