为什么我的jQuery click函数无法触发？

Question

I am building a search page that posts back to itself. I finally got a sample page working here . I also built a fiddle here . But I don't understand why it works. When the user initially hits the page, it should only show the search form. When a search is submitted, it should hide the form, show results, and a button for a new search. I'm using jQuery. Here's my code:

//Code Block 1
// Show search form if there is no querystring
//Hide search form, show  results if querystring
$(document).ready(function() {
if(document.location.search.length) {
    $("#newsearch").show(1000);
    $("#results").show(1000);
    $("#search").hide(300);
} else {
    $("#search").show();
}
});

//code block 2
//if new search clicked, show form, hide  results

     $("#newsearch").click(function() {
    $("#newsearch").hide(1000);
    $("#results").hide(1000);
    $("#search").show(300);

});

When code block 1 and 2 are loaded in the head, block 2 never fires. When I pull 2 out and put it at the end of the page, it works.

I am trying to learn, so I have 2 questions. (1) Why didn't it work when it was one block, and (2) Any suggestions for doing it better?

Thank you.

D

Answer 1

$("#newsearch").click(function() { is being run before the #newsearch element exists.

Therefore the click event is attached to nothing.

It works in the first block because it's in a $(document).ready , which runs code inside only after everything has finished loading.