4

Something like creating a namespace/sub-module for my scripts concerning a module in my app? Like say I only want to delegate certain tasks to elements inside a certain div like say #submodule1.

Can I do something like this:

 $("#submodule1")
    .delegate(".selector1", "click", function() {} )
    .delegate(".selector2", "click", function() {} )

And if it is possible, will it be the same as:

 $("#submodule1").delegate(".selector1", "click", function() {} )
 $("#submodule1").delegate(".selector2", "click", function() {} )

EDIT

based on T.J. Crowder's answer i should be able to do this:

$("#soap-test-test-cases")
  .delegate(".soap-test-case", "click", function(){
      testfunction();
  });
  .delegate("legend", "click", function() {
    alert("this is a test!");
  });

but i get a syntax error

corroded
  • 21,406
  • 19
  • 83
  • 132

1 Answers1

15

Edit:

Your edit changes the question, now you have a syntax error:

$("#soap-test-test-cases")
   .delegate(".soap-test-case", "click", function(){
       testfunction();
   });
// v--- here
   .delegate("legend", "click", function() {
     alert("this is a test!");
   });

If you remove the semicolon in front of it, you're fine:

$("#soap-test-test-cases")
   .delegate(".soap-test-case", "click", function(){
       testfunction();
   })  // <== No semi here, we're not done with the statement yet
   .delegate("legend", "click", function() {
     alert("this is a test!");
   }); // <== Now we're done with the statement

That's one statement spread across multiple lines, which is fine. You're calling $(), then calling delegate on the object that $() returns, then calling delegate on the object that your first call to delegate returns.

With the semicolon after the first delegate call, you have two statements, and the second one starts with a . (which is a syntax error).

JavaScript mostly doesn't care about line breaks, it cares about statements, which are terminated by semicolons. It has the horror that is automatic semicolon insertion, but it won't insert semicolons that make your code invalid. (It will insert semicolons that make your code misbehave, though, so again, know where your statements begin and end and make sure you're providing the correct semicolons.)

Original answer:

The code samples you've given are both valid, and they have the same effect: Hooking up two separate functions to handle clicks, one of them on one subset of elements (.selector1) and the other on the other (.selector2). Your first example is just standard chaining.

I don't think this is what you're asking, but just in case: If you want to use the same function for both classes of elements, you can do that, too:

$("#submodule1").delegate(".selector1, .selector2", "click", function() { });

...or (of course) use the same named function with two separate delegate calls.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • wow so having a page of $("#submodule1"), $("#submodule2") and a lot of delegates in them is the "accepted" better practice? – corroded Apr 15 '11 at 06:14
  • hmm i tried the first one but it doesn't work for me. won't line breaks break the code? will edit the question to show the code – corroded Apr 15 '11 at 06:16
  • @corroded: I didn't say it was best practice, I said you can do it. :-) But if you have a page with a defined area within which you want to handle clicks on any element, that's exactly what `delegate` is for. – T.J. Crowder Apr 15 '11 at 06:17
  • 1
    @corroded: The line breaks you've shown are fine -- [try this](http://jsbin.com/oyufe5), [and this](http://jsbin.com/oyufe5/2), but definitely add a semicolon to the end of the *statement*. **Never** rely on automatic semicolon insertion. – T.J. Crowder Apr 15 '11 at 06:22
  • 1
    @corroded: Your edit changed the question, but you weren't to know that. :-) I've updated to answer the update. – T.J. Crowder Apr 15 '11 at 06:28