.click function not working on code loaded using Ajax

Question

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();
        });

possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — loganfsmyth, Feb 18 '13 at 16:15
possible duplicate of [jQuery on not working](http://stackoverflow.com/questions/8614981/jquery-on-not-working) — Muhammad Talha Akbar, Feb 18 '13 at 16:15
the problem is that hes not binding any functions to the items loaded through AJAX, its not seen by the DOM unless ur explicit in a callback function. i detailed in an answer below. — PlantTheIdea, Feb 18 '13 at 16:18

score 1 · Accepted Answer · answered Feb 18 '13 at 16:13

1

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
});

answered Feb 18 '13 at 16:13

Anton

32,245
5
44
54

score 0 · Answer 2 · answered Feb 18 '13 at 16:14

Any JavaScript / jQuery manipulation to be done on items loaded through AJAX needs to be set in a callback function, otherwise it will not be seen.

$('#LoadingDiv').load('some.php #file',function(){
    // javascript to be done on the #file stuff you loaded
});

This is an overly generic example. If you do not have any parameters to pass in to the callback function, you can even just use the name of the function you've already created instead of explicit declaration.

$('#LoadingDiv').load('some.php #file',jsFunctionToCall);

Either should work.

.click function not working on code loaded using Ajax

2 Answers2