使用 Jquery 时，Div 单击事件不起作用答案

【问题标题】：Div click event not working using Jquery使用 Jquery 时，Div 单击事件不起作用
【发布时间】：2017-04-05 00:29:48
【问题描述】：

我正在构建一个计算器。我想使用 jQuery 向某些列添加单击事件。我查看了其他线程，但没有找到解决方案。另外，我正在使用 Codepen。

$(document).ready()
{
  $(".buttons-display").click(function() {
    console.log("You just clicked a button!"); //Not Working
  });
}

.row {
  border-color: black;
  border-style: solid;
  width: 25%;
  margin: auto;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: black;
  border-style: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contanier-fluid">
  <div class="container">
    <div class="row" id="display-one"></div>
    <div class="row" id="display-two"></div>
    <div class="row">
      <div class="col-md-3 buttons">C</div>
      <div class="col-md-3 buttons">CE</div>
      <div class="col-md-3 buttons buttons-display">(</div>
      <div class="col-md-3 buttons buttons-display">)</div>
    </div>
  </div>
</div>

【问题讨论】：

我将您问题中的代码放在可运行的 sn-p 中。希望您现在可以看到代码的语法问题。
只是指出你在哪里看ready函数是错误的$(document).ready(function(){...

标签： javascript jquery html css

【解决方案1】：

这也应该有效：

$(document).on('click', '.buttons-display', function () {
    console.log("You just clicked a button!"); 
});

【讨论】：

【解决方案2】：

使用$(document).ready(function(){ 代替$(document).ready() {

$(document).ready(function(){
  $(".buttons-display").click(function() {
    console.log("You just clicked a button!"); //Not Working
  });
})

.row {
  border-color: black;
  border-style: solid;
  width: 25%;
  margin: auto;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: black;
  border-style: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contanier-fluid">
  <div class="container">
    <div class="row" id="display-one"></div>
    <div class="row" id="display-two"></div>
    <div class="row">
      <div class="col-md-3 buttons">C</div>
      <div class="col-md-3 buttons">CE</div>
      <div class="col-md-3 buttons buttons-display">(</div>
      <div class="col-md-3 buttons buttons-display">)</div>
    </div>
  </div>
</div>

【讨论】：

没问题，但为了将来参考，最好只标记这样的问题 - 问题纯粹是由于语法错误或拼写错误 - 关闭。

【解决方案3】：

它适用于我而无需更改任何内容，请确保 jquery 包含在 codepen 中，方法是进入 settings/javascript/add external Javascript/

【讨论】：

我很想知道它在语法问题上是如何为您工作的。 “它有效”也不是答案。
我没有更改任何语法，只是复制并粘贴了您的代码，并且在包含 jquery 的情况下，我得到了“您刚刚单击了一个按钮！”在控制台中（点击时）
再一次 - 怎么样？如果您在问题中运行 sn-p，您只会因为缺少 } 和 function 定义而收到错误
忘记包含 jQuery。它可以在没有函数定义的情况下工作。