jQuery Dollar Sign Confusion

Question

I'm a bit confused regarding the dollar sign in jQuery, and was hoping someone could help me out.

I have the following function declaration:

$(function() {
    $( "#create-discussion" ).button().click(function() {
        alert("Clicked");
    });

    $( "#listitems tr" ).click(function(event) {
        alert("clicked");
    });
});

For some reason, the first function declaration for the "create-discussion" button works perfectly; when clicked, a popup appears. However, the second one does not work, and no popup is generated when I click on the table rows.

Is this some nuance in regards to button onClicks versus table row onClicks? Am I missing something stupidly obvious?

Also, I think it would help a bunch if someone explained what $(function() {}) actually does, as I'm treating it like $(document).ready(), and I'm not sure if I can do that.

Answer 1

A dollar sign ($) is actually an alias for jQuery function. And according to the documentation, if you pass a callback as an argument to this function, it will be executed when the DOM is ready.

When it comes to the second part of your question (about why the second part of the code is not working): just check the selectors. For me it is working perfectly (see jsfiddle - it is without .button() method, because I am not loading jQuery UI), so this may be caused by incorrect selectors.