Im having a problem with a jquery link inside a div

To explain, I have a <div id=map></div> which inside that loads a separate page (inc_map.php) of a map.

Outside of this div, on the main page, I have 4 links that control the character inside the div by reloading it. When you click one of them, a function runs, like:

$(function() {
  $("#left").click(function(evt) {
     $("#map").load("inc_map.php?move=left");
     evt.preventDefault();
     })

I want to change the links from outside of the div, to inside of the div, but it's causing me grief and not working.

Any idea why? I've tried naming them different id's etc too.

• jquery
• hyperlink

please try this: (example div#map)

HTML

<div id="map">
    <a href="#" id="left">L1</a>
    <a href="#" id="right">L2</a>
    <a href="#" id="top">L3</a>
    <a href="#" id="bottom">L4</a>
</div>

jQuery

$(function() {
    $('#left').on('click', function(evt) {
        var $contents = $('#map').contents();
        $("#map").load("inc_map.php?move=left", function() {
            $(this).prepend($contents);
        });
        evt.preventDefault();
    });
});

This works as expected for me:

<script type="text/javascript" language="javascript">
    $(function () {
        $("#left").click(function (evt) {
            $("#map").load("test.html?move=left");
            evt.preventDefault();
        });
    });


</script>

<div id="map">   <a id="left">TEST CLICK </a>
</div>

Maybe you can try debugging it with firebug to see the whole picture. Hope it helps.