[jQuery] Rebind events on dynamic content (modified DOM)
You are calling BindTimeSelectors before the AJAX load is complete.
Which AJAX load is the one that BindTimeSelectors depends on? Assuming it is
the second one, you could code it like this:
$("#daysheader").load( "ajax/weekview_headers.aspx?fromdate=" +
calendarDay.Date );
$("#days").load(
"ajax/weekview_appointments.aspx?fromdate=" + calendarDay.Date,
BindTimeSelectors()
);
Also, the code that wires up the events could be simplified considerably.
Are you able to give each of those DOM elements a common class name? If they
all have the class name "dayselector" then you could just code:
function BindTimeSelectors()
{
//Wire up mouse down events to the day selectors.
$(".dayselector").mousedown( function() { mouseDown( this.id ); } );
}
If you can't do that, a simple loop would do the trick:
function BindTimeSelectors()
{
//Wire up mouse down events to the day selectors.
for( var i = 1; i <= 5; i++ ) {
$( "#day" + i + "selector" ).mousedown( function() { mouseDown(
this.id ); } );
}
}