編集をクリックしても警告ボックスが表示されないのはなぜですか？

bugfix> javascript > 投稿

私のコードには、 class = specific のクラスを持つdivタグがありますdivには2つのタグ `、。があります。スパンにはテキストがあり、アンカータグは次のようになります。

<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の助けを借りてこんにちは警告ボックスが表示されます。しかし、それは機能しません。

コードjQuery：-

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

アラートボックスが表示されない理由。ありがとうございました。

javascript

jquery

html

回答 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>

  • JavaScript関数を次の関数に変更します。それ以外はすべて問題ありません。

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

    これにより、すべてのスクリプトがロードされた後にコードが確実にバインドされます。

あなたの答え

関連記事