Click event only works the first time

Question

I’ve looked for it in other places but I couldn’t find a solution that would work for me. This is the site:

http://pedrowebdesign.hol.es/damaso/

These 3 squares at the top, are locations for photos of the services provided to the last 3 customers (presented in slideshow). When I click on any of them, Javascript performs an AJAX call to a PHP script that lists the images of the inserted folders as 'data' attribute in the link. Each client has an image folder. Yes, the site is static. I made a homemade lightbox to not use too many plugins (since I’m using jcycle). The problem is when I close the lightbox.

Whoever is reading, please visit the site (not yet optimized for smartphones and tablets) and click one of the blue boxes at the top. It worked, didn’t it? Now click on the little square in the upper right corner. You may notice that everything closes as expected. Now try one more click on any of the boxes. Very likely it didn’t work. I couldn’t identify the error so far. Could anyone tell me why this is happening? It only works on the first click. Then, just reload the page :/

Here’s the code:

<script type="text/javascript">
$(document).ready(function(){
    $('.featured .client').on("click", function(e){
        e.preventDefault();
        $('body').addClass('active');
        $('.modal').fadeIn();

        $.ajax({
            method: 'GET',
            url: '/damaso-cod/gallery.php',
            data: "main_dir=client_images&images_dir="+$(this).data('folder'),
            success: function(data){
                $('.modal').html(data);
                $('.modal').cycle({
                    'next': '#next',
                    'prev': '#prev'
                });
            }
        });

        $('#close-btn').on("click", function(e){
            e.preventDefault();
            $('.modal').html('').cycle('reinit');
            $('.filter').fadeOut();
            $('body').removeClass('active');
        });
    });
});
</script>

Answer 1

I got it working on the fiddle: http://jsfiddle.net/jaderw/1f4efku7/

jquery: (I marked below what was modified)

$('.featured .client').on("click", function (e) {
    e.preventDefault();
    $('body').addClass('active');
    $('.filter, .modal').fadeIn(); // MODIFICADO

    $.ajax({
            method: 'GET',
            url: '/damaso-cod/gallery.php',
            data: "main_dir=client_images&images_dir="+$(this).data('folder'),
            success: function(data){
                $('.modal').html(data);
                $('.modal').cycle({
                    'next': '#next',
                    'prev': '#prev'
                });
            }
        });
});

// on click abaixo foi retirado de dentro do on click de cima...

$('#close-btn').on("click", function (e) {
    e.preventDefault();
    $('.filter, .modal').fadeOut(400, function () {
        $('.modal').cycle('destroy').html('');
        $('body').removeClass('active');
    }); // MODIFICADO
});

Answer 2

Well, by the time Voce closes the lightbox style="display:none" in the div of the said whose, then it will never appear again, the cool would be that every time Voce triggers the button, it adds a style="display:display;" in the class of the div

Answer 3

Pedro Vinícius,

Try jQuery 1.7.2 with . live

 <script type="text/javascript">
 $(document).ready(function(){
     $('.featured .client').live("click", function(e){
         e.preventDefault();
         $('body').addClass('active');
         $('.modal').show();

         $.ajax({
            method: 'GET',
            url: '/damaso-cod/gallery.php',
            data: "main_dir=client_images&images_dir="+$(this).data('folder'),
            success: function(data){
                $('.modal').html(data);
                $('.modal').cycle({
                    'next': '#next',
                    'prev': '#prev'
                });
            }
        });
    });

    $('#close-btn').live("click", function(e){
        e.preventDefault();
        $('.modal').html('').cycle('reinit');
        //$('.filter').fadeOut();  nao compreendi
        $('.modal').hide();
        $('body').removeClass('active');
    });
});

Answer 4

Try using firefox’s Firebug, it probably only works once because it is raising an exception that can probably be in PHP.