Question

我正在建造一个计算器。我想使用jQuery向某些列添加click事件。我查看了其他线程，但没有找到解决方案。另外，我正在使用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>

Answer 1

使用$(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>

Answer 2

这也应该有效：

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

Answer 3

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

Div Click事件使用Jquery不起作用

3 个答案: