CODEWITHSUNDEEP
jqueryajaxlive
user1937021
user1937021

Reputation: 10791

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

Upvotes: 0

Views: 176

Answers (2)

PlantTheIdea
PlantTheIdea

Reputation: 16369

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.

Upvotes: 0

Anton
Anton

Reputation: 32581

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

Upvotes: 1

Related Questions