jQuery单击事件在页面上不起作用，但它们适用于jsFiddle

Question

I checked js tags are just fine, everything is closed, but the js all of sudden decides not to work. I have the code working in JSFiddle so I know it has to be something I did or possibly the server. I just need some outside influence to make sure it's not oversight.

This is the site with the problem. Here's the code:

$(document).ready(function(){
    $(".designers").show();
    $('.list').hide();
});

$(".but").click(function(){
    $(".designers").hide();
    $(".list").show("slide", { direction: "down" }, 1000);
});

$(".but2").click(function(){
    $(".designers").show();
    $(".list").hide("slide", { direction: "down" }, 1000);
});

Answer 1

The event handlers should go in the ready function as well:

$(document).ready(function(){
    $(".designers").show();
    $('.list').hide();

    $(".but").click(function(){
        $(".designers").hide();
        $(".list").show("slide", { direction: "down" }, 1000);
    });

    $(".but2").click(function(){
        $(".designers").show();
        $(".list").hide("slide", { direction: "down" }, 1000);
    });
});

JsFiddle automagically sticks everything in a document ready, that's why it works there and not on your site, as you're trying to fetch the elements before they are added to the DOM.