Facebox not working on elements loaded into specific div with jQuery

Question

just want to put it out there, that I have searched all over stackoverflow and google but couldn't resolve my problem with the help I found.

I have a weekly calendar, which days are separated into div elements. Each div has an ID of dmY. I use a mix of php and jQuery to load events into days of the selected week.

Below is the mix of jQuery and PHP that does just that (loads events into certain days of the week).

echo "<script type=\"text/javascript\">
    jQuery(document).ready(function($) {
        $('a[rel*=facebox]').facebox({
            loadingImage : '/scripts/facebox-v1.3/loading.gif',
            closeImage   : '/scripts/facebox-v1.3/closelabel.png'
        });
        $(document).bind('beforeReveal.facebox', function() {
        $(\"#facebox .content\").empty();
    });
    ";

    for($day=1; $day<=5; $day++) {
        echo "$('#".date('d-m-Y', strtotime($year."W".$week.$day))."').append( $('<div />').load('/cal/load #".date('d-m-Y', strtotime($year."W".$week.$day))."' ));\n";
    }
    echo "});
    </script>"; 

Below is the data that gets loaded into the specific div.

echo "<div id='".date('d-m-Y', strtotime($event['timeStart']))."' style='width: 100%; height: ".$eventLong."px; top: ".$eventPosition."px; left: 0%; position: absolute; z-index: 1; background: #C30;'><a href='#' rel='facebox'>Delete</a></div>";

My problem is that I can't get facebox to work - I want to achieve that when I click on the delete button, facebox pops out.

Answer 1

OK I encountered another problem and I think I fixed the code... it's as it should be now.

Below is the jQuery version without PHP (I have a $date variable for all the dates in the code):

$(document).ready(function() {
    $('#30-01-2012').append($('<div>').load('/cal/load/room/del/date/30-01-2012 #30-01-2012' ,function() {
        $('#delete a[rel*=facebox]').facebox();
    });
});

Answer 2

Are you having a Jquery Error?

Maybe you have a Jquery Conflict? If you write a simple alert($('body').html()); would it work?

If so you need to see that you are loading the scrips well...

Answer 3

After playing with the code I got it to work - kinda. Facebox now works on the append.load elements. But only after I make a CLICK somewhere on the website. Any ideas on how to make it work on ready?

"Modified code":

 echo "<script type=\"text/javascript\">
    $(document).ready(function() {
        $('a[rel*=facebox]').facebox({
            loadingImage : '/scripts/facebox-v1.3/loading.gif',
            closeImage   : '/scripts/facebox-v1.3/closelabel.png'
        });
        $(document).bind('click', function() {
            $('a[rel*=facebox]').facebox({  
            loadingImage : '/scripts/facebox-v1.3/loading.gif',
            closeImage   : '/scripts/facebox-v1.3/closelabel.png'
        });
        $(document).bind('beforeReveal.facebox', function() {
            $(\"#facebox .content\").empty();
        });
    });
    ";

    for($day=1; $day<=5; $day++) {
        echo "$('#".date('d-m-Y', strtotime($year."W".$week.$day))."').append( $('<div />').load('/cal/load #".date('d-m-Y', strtotime($year."W".$week.$day))."' ));\n";
    }
    echo "});
    </script>";