HTML/JS/jQuery: plugins not working after HTML links are clicked
<p>So I am using a combination of a search box + Flickr API so that people can search pictures and get results. Along with that, I am using the Colorbox JS plugin so that people can click on the pictures and the picture will be enlarged and centered.</p>

<p>Along with this, I have 3 links labeled "Funny, Memes, and Scary" that make it convenient for people to view pictures of those genres. Here's the HTML for that:</p>

<pre><code>    &lt;div class="tool"&gt;
        &lt;a href="#" class="blackbar" id="funny"&gt;Funny&lt;/a&gt;
        &lt;a href="#" class="blackbar" id="scary"&gt;Scary&lt;/a&gt;
        &lt;a href="#" class="blackbar" id="memes"&gt;Memes&lt;/a&gt;
    &lt;/div&gt; &lt;!-- tool --&gt;
</code></pre>

<p>I click on one of them (e.g. Funny) and pictures come out like they are supposed to. I click on one of these pictures and colorbox works. However, I click on another one (e.g. Scary) and not as many pictures load + colorbox stops working. I noticed that the URL has an additional <code>#</code> from the <code>&lt;a href="#"</code> , and I believe that could be the issue? Would there be a way to make the href not affect my JS? I tried to leave it blank but it would just refresh the page.</p>

<p>Here's my JS (not sure if it's necessary to show but here it is in case):</p>

<pre><code>$('#funny').on('click',function(){
    $('.leftcolumn').html('');
    $.getJSON('http://api.flickr.com/services/rest/?format=json&amp;method=flickr.photos.search&amp;api_key=2fd41b49fedfd589dc265350521ab539&amp;tags=funny&amp;jsoncallback=?', function(data){
        $.each(data.photos.photo, function(i, value){
            content = '&lt;a href="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg" class="colorbox" rel="example1"&gt;&lt;img src="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg"&gt;&lt;/a&gt;';
            $('.leftcolumn').append(content);
            $("a[rel='example1']").colorbox();
            if (i == 19) {
                return false;
            };
        })
    });
    getContent('funnytext.html');
    $('.blackbar').css({ "font-size": "1em"});
    $('#funny').animate({fontSize: "2em"});
});



$('#memes').on('click',function(){
    $('.leftcolumn').html('');
    $.getJSON('http://api.flickr.com/services/rest/?format=json&amp;method=flickr.photos.search&amp;api_key=2fd41b49fedfd589dc265350521ab539&amp;tags=memes&amp;jsoncallback=?', function(data){
        $.each(data.photos.photo, function(i, value){
            content = '&lt;a href="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg" class="fancybox" rel="example1"&gt;&lt;img src="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg"&gt;&lt;/a&gt;';
            $('.leftcolumn').append(content);
            $("a[rel='example1']").colorbox();
            if (i == 19) {
                return false;
            };
        })
    });
    getContent('memetext.html');
    secondGetContent('memetext2.html');
    $('.blackbar').css({"font-size": "1em"});
    $('#memes').animate({fontSize: "2em"});
});



$('#scary').on('click',function(){
    $('.leftcolumn').html('');
    $.getJSON('http://api.flickr.com/services/rest/?format=json&amp;method=flickr.photos.search&amp;api_key=2fd41b49fedfd589dc265350521ab539&amp;tags=scary&amp;jsoncallback=?', function(data){
        $.each(data.photos.photo, function(i, value){
            content = '&lt;a href="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg" rel="example1"&gt;&lt;img src="http://farm'+value.farm+'.staticflickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg"&gt;&lt;/a&gt;';
            $('.leftcolumn').append(content);
            $("a[rel='example1']").colorbox();
            if (i == 19) {
                return false;
            };
        })
    });
    getContent('scarytext.html');
    $('.secondright').html('');
    $('.blackbar').css({"font-size": "1em"});
    $('#scary').animate({fontSize: "2em"});
});
</code></pre>

<p>btw, getContent is an AJAX function to load a picture on the right side of the page.</p>

<pre><code>function getContent(filename) {
    $.ajax({
        url: filename,
        type: "GET",
        dataType: "html",
        beforeSend: function(){
            $('.rightcolumn').html('&lt;img src="images/loading.gif"&gt;');
        },
        success: function (data, textStatus, xhr) {
            setTimeout(function (){
                $('.rightcolumn').html(data);
            }, 2000);
        },
        error: function(xhr, textStatus, errorThrown) {
            $('.rightcolumn').html(textStatus);
        }
    });
}
</code></pre>

<p>I also tried putting the <code>.colorbox()</code> method outside of the this event in the global space (tried it for shadowbox, colorbox, and fancybox), but it would just screw up the plugin and make it faulty. </p>
