Click event only works the first time

Question

Click event only works the first time

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

I've tried to find it elsewhere, but I did not find a solution that worked for me. The site is this:

These 3 squares at the top are places for the photos of the services provided to the last 3 clients (shown in slideshow). When I click on any of them, JavaScript makes an AJAX call to a PHP script that lists the images of the inserted folders as a 'date' attribute on the link. Each client has a folder with images. Yes, the site is static. I made a home lightbox to not use too many plugins (since I'm using jcycle). The problem is when I close the lightbox.

Whatever you're reading, go to the site by gentility (not yet optimized for smartphones and tablets) and click on one of the blue boxes at the top. It worked, did not it? Now click on the square in the upper right corner. You may notice that everything closes as expected. Now try clicking on any of the boxes. Most likely it did not work. I could not identify the error so far. Could anyone tell me why this is happening? It only works on the first click. Then just reloading the page: /

Here is 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>

php javascript jquery ajax

asked by anonymous 14.08.2014 / 17:00

4 answers

Ping with Objective-C Get SQL before POST in a ZQuery

score 1 · Answer 1

I was able to make fiddle work: link

jquery: (checked below that has been 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
});

score 0 · Answer 2

Well, at the time you close the lightbox you are simply placing a style="display:none" in the said div whose, then it will never appear again, the cool thing is that every time you press the button, it adds a% in the div class

score 0 · Answer 3

Pedro Vinícius,

Try using 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');
    });
});

score 0 · Answer 4

0

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

14.08.2014 / 18:55