Question

I have working code that includes:

  $(document).ready(function() 
  { $("#num1").click(function() { $("li.elementsA").addClass("alerty"); 
     return false }); });
  $(document).ready(function() 
  { $("#num2").click(function() { $("li.element").addClass("ok"); 
     return false }); });

How can I have both functions without the document.ready piece in the second one.

I tried

  $(document).ready(function() 
  { $("#num1").click(function() { $("li.elementsA").addClass("alerty"); 
    return false }); }
  { $("#num2").click(function() { $("li.element").addClass("ok"); 
    return false }); });

but it didn’t work.

Answer 1

In your 2nd example, the DOM Ready handler function is closed at the end of the 3rd line at the last }, after that you get a SyntaxError: Unexpected token {.

You just have to wrap both click handlers inside of the DOM ready handler:

$(document).ready(function () {
    $("#num1").click(function () {
        $("li.elementsA").addClass("alerty");
        return false;
    });
    $("#num2").click(function () {
        $("li.element").addClass("ok");
        return false;
    });
});

I beautified your code to make it easier to read too. =]

Here are the non-beautified changes to make it “more” visible in relation to the original code:

  $(document).ready(function() 
  { $("#num1").click(function() { $("li.elementsA").addClass("alerty"); 
    return false });
//↓Remove { here     ↑And } here
    $("#num2").click(function() { $("li.element").addClass("ok"); 
    return false }); });