Works in jsFiddle but not on live site

Question

var add_time = function ($category) {
    'use strict';

    var time_element = $('<input size="7" class="time" placeholder="00:00" pattern="(?:(?:\\d:)?[0-5])?\\d:[0-5]\\d" title="Please insert a time in the form of [[h:]m]m:ss." />');

    if ($('.time').length === 0) {
        time_element.insertAfter($category.find('.add_time_button'));
    } else {
        time_element.insertAfter($('.time'));
    }
};

$('.add_time_button').click(function () {
    'use strict';

    add_time($(this).parentsWhen('.category'));
});

I don't get it. No console errors. Everything looks fine to me. Ran it through JSFiddle. Nothing. Sigh. The question is all in the title. Here's the jsFiddle: http://jsfiddle.net/gtr053/N2HmG/

To future readers, this will be a 404 someday soon. Live site: http://bama.ua.edu/~tscrompton/annotation/

Answer 1

jsfiddle surrounds your javascript in a onLoad . On your site, where are you putting the javascript? In the head section? If so, that's why it's not working. You have to assign your onclicks and all that jazz after the elements load.

EDIT:

In your javascript file you can do this:

$(document).ready(function(){
    //put the javascript from the jsfiddle in here
});