OnClick 在 Jquery 中不起作用答案

【问题标题】：OnClick not working in JqueryOnClick 在 Jquery 中不起作用
【发布时间】：2015-08-08 07:56:04
【问题描述】：

我已经编写了一个简单的代码，想要隐藏一个 div 并在单击按钮时显示另一个。但是什么都没有发生，控制台上也没有显示任何内容。

    <!DOCTYPE html>
      <html lang="en">

      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Demo</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

       <script type="text/javascript">     
        $(document).ready(function() {
          $('#register-btn').on("click", function() {
          $('#reg').hide();
        });
      });  
    </script>
     </head>
      <body>
        <div class="container" id="reg">
          <div class="row">
            <h1 style="text-align:center;">Demo</h1>
          </div>

         <form class="form-horizontal">
          <div id="call" class="col-md-6 col-md-offset-4">
            <div class="form-group">
              <div class="col-md-10">
                <input id="name" class="form-control"  type="text"  placeholder="Enter a Name"/>
              </div>
            </div>    

            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-md-offset-2">
                  <button class="btn-style" id="register-btn">Register</button>
                </div>
              </div>
            </div>
          </div>
         </form>
        </div> 

    </body>
</html>

谁能帮我解决这个问题？

【问题讨论】：

它对我来说很好，我认为你的问题是当你点击按钮时页面正在重新加载，因为它是在表单中

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

button 元素的默认类型是submit。当您单击元素时，form 被提交并且页面被刷新。对button 元素使用type="button" 属性：

<button type="button" class="btn-style" id="register-btn">Register</button>

或者使用event对象的preventDefault方法阻止事件的默认动作。

【讨论】：

【解决方案2】：

你可以返回 false；禁用默认行为，它将起作用

$(document).ready(function() {
$('#register-btn').on("click", function() {

$('#reg').hide();
return false;
});
});

【讨论】：