Including Javascript for button click in Jade

Question

I am having trouble detecting a button click using Node.js, Bootstrap and Jade.

I have the following Jade code but I am not seeing the log from the onclick method and there is no change to the button. So the method never gets called.

extends layout


block content
    .jumbotron
        .container
            h1= title
            p Enter the url of the file to be sent
            form#formInputURL(name="chooser",method="post",action="/chooser",)
                input#inputURL(type="text", placeholder="insert url", name="chooseurl")
                button#btnSubmit(type="submit") submit
                p
                .btn-group(data-toggle='buttons')
                    label.btn.btn-primary.active
                        input#option1(type='checkbox', autocomplete='off', checked='')
                        |  Radio 1 (preselected)
                    |   
                    label.btn.btn-primary
                        input#option2(type='checkbox', autocomplete='off')
                        |  Radio 2
                    |   
                    label.btn.btn-primary
                        input#option3(type='checkbox', autocomplete='off')
                        |  Radio 3
script.
    $('#option2').on('click', function () {
        console.log("clicked")
        $(this).button('toggle')
    })

Answer 1

your code is working fine,

make sure you're clicking on the right element (checkbox).

have a look at this example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="jumbotron">
    <div class="container">
      <h1></h1>
      <p>Enter the url of the file to be sent</p>
      <form id="formInputURL" name="chooser" method="post" action="/chooser">
        <input id="inputURL" type="text" placeholder="insert url" name="chooseurl" />
        <button id="btnSubmit" type="submit">submit</button>
        <p></p>
        <div data-toggle="buttons" class="btn-group">
          <label class="btn btn-primary active">
            <input id="option1" type="checkbox" autocomplete="off" checked="" /> Radio 1 (preselected)
          </label>
          <label class="btn btn-primary">
            <input id="option2" type="checkbox" autocomplete="off" /> Radio 2
          </label>
          <label class="btn btn-primary">
            <input id="option3" type="checkbox" autocomplete="off" /> Radio 3
          </label>
        </div>
      </form>
    </div>
  </div>
  <script>
    $('#option2').on('click', function() {
      alert("clicked")
    })
  </script>