Question

I have a div with an id called #wrapper. Next to it I have button. When the button is clicked, an ajax call is triggered returning a list of divs with a class called .calendarDate. Everything works great, #wrapper is populated fine.

Now I am trying to have a click event on that .calendarDate class, but it is not working. The strange part is that the CSS properties I apply to that class are working properly. Hope someone can acknowledge about that strange behavior. By he way, no errors in my debugger. Thank you in advance for your replies. Cheers. Marc

My PHP: working great

Here i set my variables...

while($input<$inDays){
    ++$input;
    $test=$input." days";
    if($input<0){$attribut='"avant"';}else{$attribut='"apres"';}
    echo '<div class="calendarDate" indiDate=' .$attribut. '>' .date('Y-m-d', strtotime($test)). '</div>';
}

My JS:

$(document).ready(function() {
$('#wrapper').load('php/calendar2.php');
$('.calendarDate').click(function(){
        alert('Whaou!');
    });
});

My HTML:

<div id="wrapper"></div>
        <input id="envoyer" type="submit" multiplicateur="1">

Answer 1

It sounds like you’re binding the click event to the calendarDate class before it exists. Try using this to bind the event handler instead…

$(document).on("click", ".calendarDate", function() {
    // etc
}

That will fire the click event handler to all elements with a class of calendarDate, regardless of whether they exist at document ready or not.