CODEWITHSUNDEEP
jquerypug
jviotti
jviotti

Reputation: 18919

Jade button and jQuery click event

I don't get why it's not working...

I have this index.jade file:

!!! 5
html
  head
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="/javascripts/jquery-1.8.2.js")
           script
       $("#rollButton").click(function() {
          alert("sas");
       });
  body
     input#rollButton(type="button", value="Roll")

It should pop up the alert! What am I missing?

Generated HTML seems OK:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="/javascripts/jquery-1.8.2.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$("#rollButton").click(function() {
  alert("sas");
});
</script>
</head>
<body>
<input id="rollButton" type="button" value="Roll">
</body>
</html>

Upvotes: 4

Views: 15386

Answers (2)

Aashish Mangal
Aashish Mangal

Reputation: 1

Remove this !!! 5

html
 head
link(rel='stylesheet', href='/stylesheets/style.css')
script(src="/javascripts/jquery-1.8.2.js")
       script
   $("#rollButton").click(function() {
      alert("sas");
   });
body
 input#rollButton(type="button", value="Roll")

Upvotes: 0

Adam Lukaszczyk
Adam Lukaszczyk

Reputation: 4926

I'm not familiar with [jade] yet, but shouldn't there be jQuery "onReady" function, like this one:

!!! 5
html
  head
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="/javascripts/jquery-1.8.2.js")
    script
       $(document).ready(function(){
         $("#rollButton").click(function() {
          alert("sas");
         });
       });
  body
     input#rollButton(type="button", value="Roll")

EDIT: And I'm not sure about the indentation. It should be fixed too, as I see in other comments.

Upvotes: 6

Related Questions