0

I have a page that has a series of divs in the center and a vertical column on the right. When you click on one of the divs in the center, details about that item show in the vertical column. Initially there is some content in the right column with an image, that when clicked, causes the column to expand and contract.

The problem I have is that when you click on one of the divs in the center and new content is loaded into the right column the .click function that controls the expand/contract no longer works when you click the new image.

Page: goo.gl/aNJ8YP

Code controlling the expand/collapse:

<script>
$('.preview-img-overlay').click(function() {$('.previewPane').toggleClass('expanded-preview');});
</script>

Code controlling the loading of item details into the vertical column: 

<script>
    $(function () {
        $(".clicky").click(function () {
            var content_id = $(this).attr('href');
            $('#previewContainer').hide().html($(content_id).html()).fadeIn(500);
            return false;
        });
    });
</script>

Any help would be appreciated.

hankphone
  • 123
  • 1
  • 1
  • 6

1 Answers1

0

try using this syntax for the click events

$(document).on('click', '.clicky', function () {
   //do stuff here
});

this should handle click events on elements added to the dom as well as pre-existing elements on the dom. hope this helps!

indubitablee
  • 8,136
  • 2
  • 25
  • 49