10

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.

nalply
  • 26,770
  • 15
  • 78
  • 101
sichinumi
  • 1,835
  • 3
  • 21
  • 40
  • It is exactly a short-cut for the document ready event handler. The two are functionally equivalent. Which is to say, that isn't your problem. – tvanfosson Jun 03 '11 at 17:19
  • Just try to convert `$("#listitems tr")` to `$("#listitems tr td")`. (Just a thought.) – Jack Billy Jun 03 '11 at 17:19
  • 3
    Do the table rows exist when the $("#listitems tr") handler is being bound? Keep in mind that event handlers traditionally only work on present elements. If you want one that works on future elements, you need to use live handlers (http://api.jquery.com/live/). – Elias Zamaria Jun 03 '11 at 17:20
  • What is with that `button()` function? – Jack Billy Jun 03 '11 at 17:21
  • Mike, I think you may have nailed it - my table is dynamically populated with a server query *way* after this code is called. Looking at the live handlers link you mentioned now. :) Please submit an answer so I can give you credit! – sichinumi Jun 03 '11 at 17:22
  • Jack Billy, the first element is an input button, not a table row. The "td" addition didn't work, I think the problem is what Mike suggested. – sichinumi Jun 03 '11 at 17:23
  • @JackBilly - The button() function is part of jQuery UI. I was going to suggest making sure he was referencing the jQuery UI library as well, but it seems Mike has sorted out the actual issue. – WesleyJohnson Jun 03 '11 at 17:27
  • Yep, Mike's got it, once I used live handlers, everything worked great. :) Mike, post an answer!!! :P – sichinumi Jun 03 '11 at 17:31

2 Answers2

13

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.

bsa
  • 2,671
  • 21
  • 31
Tadeck
  • 132,510
  • 28
  • 152
  • 198
4

What you are doing should work so long as your selector text "#listitems tr" has something valid to select.

You can test by doing ... if the result is 0 that means jQuery did not find any valid items

alert($("#listitems tr").length);

When you make the call

$("a").click(function(evt) { alert("hello world!"); });

You are binding a click event to all <a> tags on your page. You could very well do the same with ...

$("a").click(myFunc);
function myFunc(evt) { alert("hello world!"); }

A click function can be attached to any html element. It does not have to be a button, it could be , , and etc. The element does not even have to be visible though you will only be able to fire the click if you call the actual event by doing ...

$("a").click();

The $("...") is just short hand for typing jQuery("...")

Hopefully this answers your questions.

CraigW
  • 715
  • 4
  • 5