CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Iain Simpson
Iain Simpson

Reputation: 8121

Click event function not being fired from inside Fancybox lightbox

I am using fancybox http://fancyapps.com/fancybox/ to add a lightbox popup to my site. I have also added a link under the lightbox pop out image, and am trying to change other things on the page.

If I put the click function into jsfiddle it works just fine :

http://jsfiddle.net/cmVjN/

but when it is clicked from inside the lightbox the click event function isnt triggered :

        <script>
        $(document).ready(function() {
        $(".fancybox-thumb").fancybox({
             afterLoad: function() {
            this.title = '<a class="selectlink" href="#" id="' + this.title + '">Select This Image</a> ';
        },
            prevEffect  : 'none',
            nextEffect  : 'none',
            helpers : {

                title   : {
                    type: 'outside'
                },
                thumbs  : {
                    width   : 50,
                    height  : 50
                }
            }

        });


    $('.selectlink').click(function () {
        var myId = $(this.id);
        alert(this.id);
        $('#' + myId).prop('checked', true);
    });
    });
    </script>

This is the html / php

echo '<div class="imagewrapper">';
echo '<a title="'.$row2['id'].'" class="fancybox-thumb" rel="fancybox-thumb" href="albums/'.$albumid.'/800x600/'.$row2['image'].'"><img style="border-radius:5px;" src="albums/'.$albumid.'/thumbnails/'.$row2['image'].'" /></a>';
  echo '<div style="text-align:center;">';
  echo '<strong>Select : </strong><input class="selectcheckbox" type="checkbox" name="'.$row2['image'].'" id="'.$row2['id'].'" />';
  echo '</div>';
  echo '</div>';

Upvotes: 1

Views: 2014

Answers (2)

Iain Simpson
Iain Simpson

Reputation: 8121

I got there in the end with :

$(document).on('click', '.selectlink', function () {
 var myId = $('#check_' + this.id);
 $(myId).attr('checked', true);
 countChecked();

Upvotes: 0

Headshota
Headshota

Reputation: 21449

Try:

$(document).on('click', '.selectlink', function () {
     var myId = $(this.id);
     alert(this.id);
     $('#' + myId).prop('checked', true);
});

Basically what happens is the element is not loaded when you set the event handler, but using .on will delegate event from document to the required element. so the elements that will be added in future also will fire the event.

http://api.jquery.com/on/

Upvotes: 3

Related Questions