Question

在我的代码中有一个div标签，其类为class = specific，在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");     
});

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

Answer 1

您必须在$(document).ready(function(){

中添加代码

＆＃13;

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

＆＃13;

Answer 2

将您的JavaScript功能更改为以下功能。其他一切看起来都不错。

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

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

单击编辑时为什么不显示警告框？

2 个答案: