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");     
});

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

回答 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");     
         });
      });
    
    

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

あなたの答え