javascript - Why are my buttons not doing anything when clicked on?

Question

I am currently trying to build a site that has three buttons, a Facebook Sharing one, a Twitter one, and another one that links to a video. They are classed as "facebook", "twitter", and "play". However, none of them go to the links that I had written in my javascript file. Here is my Javascript file in case something is wrong with it:

$(function() {
var clicks = 0;
$('button').on('click', function() {
    clicks++;
    var percent = Math.min(Math.round(clicks / 3 * 100), 100);
    $('.percent').width(percent + '%');
    $('.number').text(percent + '%');
});


$('.facebook').on('click', function() {
    window.open('http://www.facebook.com');

    var w = 580, h = 300,
            left = (screen.width/2)-(w/2),
            top = (screen.height/2)-(h/2);


        if ((screen.width < 480) || (screen.height < 480)) {
            window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
        } else {
            window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);   
        }

});

$('.twitter').on('click', function() {
    var loc = encodeURIComponent('http://bit.ly/somawater'),
            title = "Beautifully innovative all-natural water filters by Soma — ",
            w = 580, h = 300,
            left = (screen.width/2)-(w/2),
            top = (screen.height/2)-(h/2);

        window.open('http://twitter.com/share?text=' + title + '&url=' + loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});

$('.play').on('click', function() {
    window.location.href = "http://kck.st/TH0NAN";
});

});

In my HTML file, I call on this Javascript file by saying

<script src="/share/share.js"></script>.

Share.js is what the javascript is named. Can someone spot out what may be the problem? I can't figure it out...

Answer 1

Please check that the html elements on which you are adding the events are there on the page when dom is ready as you have applied code on dom ready. You might be setting the html through some other source like ajax or something else which might occur after dom ready.

Try adding the events on window load:

$(window).on('load',function(){

//Your code to be put here
});