包括用于Jade中按钮点击的Javascript

Question

我在使用 Node.js、Bootstrap 和 Jade 检测按钮点击时遇到问题。

我有以下 Jade 代码，但我没有看到来自 onclick 方法的日志，并且按钮没有变化。因此，该方法永远不会被调用。

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

你的代码工作正常，

确保单击正确的元素（复选框）。

看看这个例子：

<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>