'Why can't I use a script function to affect variables in html written out by a JSON file?

Hopefully a quick question.

I'm using a JSON file to write out some html and populate with variables from the JSON and append it to part of my html file. This works and is fine. However, I now want to use a different script to apply show and hide filters based on class attributes to the html that has been printed. For some reason, this isn't working. If I just copy and paste the html with variables back into the original document after its been printed out, then the script works though. Is this an issues of synchronicity?

Here's the second script I'm looking to execute if it helps:

$(document).ready(function(){
    var targets = $('.filter'), 
    buttons = $('.filter-button');  

    buttons.click(function(){
        var value = $(this).data('filter');
        if(value == "all")
        {
            buttons.removeClass('checked'); 
            targets.show();
        }    
        else
        {
            if($(this).hasClass('checked'))
            {
                $(this).removeClass('checked');
                var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');});
                if(checkedClasses.length == 0)
                {
                    buttons.removeClass('checked'); 
                    targets.show();
                }
                else
                {
                    checkedClasses = $.grep(checkedClasses, function(n, i){ return n != value }),
                    selector = '.' + checkedClasses.join('.'),
                    show = targets.filter(selector);      
                    targets.not(show).hide();
                    show.show();
                }                
            }
            else
            {
                $(this).addClass('checked'); 
                var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');}),
                selector = '.' + checkedClasses.join('.'),
                show = targets.filter(selector);      
                targets.not(show).hide();
                show.show();
              
            }
        }   
    });
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source