为什么点击编辑时没有出现警告框？答案

【问题标题】：why alert box is not appear when click on edit?为什么点击编辑时没有出现警告框？
【发布时间】：2018-11-04 17:10:55
【问题描述】：

在我的代码中有一个具有class = specific 类的 div 标签，并且在 div 中有两个标签 `,.在 span 中有一些文本，并且锚标记如下所示：-

<a class="editByAnchor" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
  <i class="fa fa-edit">
  </i>
</a>

模态

 <div class="modal fade" id="thirdModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body" style="margin: -1px;">
                <div class= "content"></div>
                <div id="specific_dates"></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary"  data-dismiss="modal">Update</button>
              </div>
            </div>
          </div>
        </div>

当我点击图标时，我会在 jQuery 的帮助下出现一个 hello 警报框。但它不起作用。

代码 jQuery:-

$('.editByAnchor').on('click', function() {
    alert("hello");     
});

为什么它不显示警告框。谢谢。

【问题讨论】：

它对我有用。你的错误是什么？控制台中显示了什么？
你在脚本标签中使用了 jquery 源文件吗？您是否以这种格式添加了 $( document ).ready(function() { //your code '});
重新检查，工作正常。可能是你不包含库，在控制台上显示什么
@melvin 它只向我显示模态
@MigratedPigeon 我在我的 jQuery 中使用了它。是的，一切都在位置

标签： javascript jquery html

【解决方案1】：

将您的 JavaScript 函数更改为以下函数。其他一切看起来都很好。

<script>
  $(document).ready(function(){
  $('.editByAnchor').on('click', function() {
  alert("hello");     
     });
  });

这可确保您的代码在所有脚本加载后绑定。

【讨论】：

【解决方案2】：

你必须在$(document).ready(function(){中添加你的代码

<!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  $('.editByAnchor').on('click', function() {
      alert("hello");     
   });
});
</script>
</head>
<body>

<a class="editByAnchor" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
  <i class="fa fa-edit">
  </i>Button
</a>
<div class="modal fade" id="thirdModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" style="margin: -1px;">
            <div class= "content"></div>
            <div id="specific_dates"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary"  data-dismiss="modal">Update</button>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

【讨论】：