.click function not working on code loaded using Ajax

The following HTML is loaded using Ajax into a div of an HTML page, I want to execute code when a user clicks on the a.start-btn within that HTML, for some reason it's not detecting the click there, I've tried .live and it didn't work. What could be wrong? Thanks

<div class="map">
    <div class="game-step1">
        <div class="note">
            <h5>Day 5</h5>
            <p>Today is the 5th day of our trip around the world... We have already visited Rome, Istambul, Kenya and Maldives.<br/><br/>
<strong>Ready to guess what will be our next destination?</strong></p>
         </div>
         <img src="img/route1.png"  class="route route1"/>
         <a href="#" class="game-button start-btn" >Start the Game &raquo;</a>   
     </div>
</div>




 function showReadyMsg() {
            $('.game-step1').animate({left:'-886px'}, 500);
            console.log('showReadyMsg called')
        }

        $(".start-btn").live("click", function(){
            console.log('button clicked')
            showReadyMsg();
        });

Solution

Live is deprecated in versions older than jQuery1.9 and removed in jQuery 1.9. using document on delegate for any dynamically created element with .start-button

Try this

$(document).on('click','.start-btn',function(){
     //Code here
});