Question

Ok, so am able to get the JSON from the PHP page, but when a user clicks on the li inside the ul#stores it does not run. it’s like the

$("ul#stores").html("");
myMarkers = {"markers": data}

is not updating and it is not able to find it in the listing and the function below does not run. Full code at end. I am not sure if this is the best way to explain my issue.

live demo @ http://brightchoice.com.au/map.html

$("ul#stores li").on("click", function(event){
            var store = $(this).text();

            $("ul#stores").hide();
            $("#storeinfo").show();
            $.each(myMarkers.markers, function(i, data){

            if(store == data.name) {
                $("#storeinfo").append("<a href='map.html'><div class='greenbar'><div class='body'><div>  <span></span> </div> <p>Back</p></div></a></div><h1>"+data.name+"</h1>"+data.phone+"<br><br>"+data.address);

                //console.log(data.address);
                //console.log(data.state); // and more
             }
            });

            //searchlistings($(this).text());

        });

FULL CODE

<script type="text/javascript">
// <![CDATA[
 $(document).ready(function(){
        //set up markers
         var myMarkers = {"markers": [{"id": 1,"name": "Belconnen","url_name": "belconnen","address": "Shop 176, 3rd Floor, Westfield Shopping Centre, Benjamin Way","suburb": "Belconnen","state": "act","postcode": 2618,"country": "Australia","phone": "[phone]","fax": "","photo": "dcddfcb5c806b2255c611bd2d108cead.JPG","text": "","display": 1,"lat": -35.238428606,"lng": 149.065917134,"email": "[e-mail]","dealer_code": 63014,"region_id": 3,"type": 4}]};

//set up map options
        defaultmap();

        $("a#backtomap").on("click", function(event){
        defaultmap();
            $("ul#stores").show();
            $("#storeinfo").hide();
        });


        $("button#search").on("click", function(event){

            var postcode = $("input#postcode").val();
            $.getJSON("http://vipcashback.com/system/classes/core.php?task=postcode&mycode="+postcode, function(data) {
            $("ul#stores").html("");
              listings = {"markers": data}
                $("#map").mapmarker({
                    zoom : 10,
                    center : postcode+" australia",
                    markers : listings
                });

                $.each(myMarkers.markers, function(i, data){

                });
            });
        });

        $("ul#stores li").on("click", function(event){
            var store = $(this).text();
            alert(store);
            $("ul#stores").hide();
            $("#storeinfo").show();
            $.each(myMarkers.markers, function(i, data){

            if(store == data.name) {
                $("#storeinfo").append("<a href='map.html'><div class='greenbar'><div class='body'><div>  <span></span> </div> <p>Back</p></div></a></div><h1>"+data.name+"</h1>"+data.phone+"<br><br>"+data.address);

                //console.log(data.address);
                //console.log(data.state); // and more
             }
            });

            //searchlistings($(this).text());

        });


        function defaultmap(){
            $("#map").mapmarker({
                zoom : 3,
                center : 'Australia',
                markers : myMarkers
            });
        }

});

// ]]>
</script>

Answer 1

if you’re dynamically creating elements you should use:

$('ul#stores li).live('click',function(){ ...});

live is made so future elements can be auto binded to events.