$(document).on('click'， '[button-id]'， function() {}) 无法正常工作

Question

我想问一下为什么这些代码行不起作用。我想借助按钮显示数据库中的记录表。我已经调用了jquery库..不过，我对jquery很陌生。我希望你能帮我解决这个问题

$(document).ready(function() {
  function fetch_month1() {
    $.ajax({
      url: "month1.php";
      method: "POST";
      success: function(data) {
        $('#link-con').html(data);
      }
    });
  }
  $(document).on('click', '#btn-month1', function() {
    fetch_month1();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-bar" name="top-bar">
  <button type="button" id="btn-month1" class="btn-month">Month 1</button>
</div>

Answer 1

你犯了小错误，你在$（document）.ready（）中使用了$（document）.on（'click'）

在$(document).ready()内部，您必须调用这样的函数$('#id').click(function(){ ... });

如果要使用$(document).on('click','#id',function(){ .... });请在$(document).ready()之外定义此内容

$(document).ready(function() {
            function fetch_month1()
            {
               alert('fetch_month1 called');
                /*$.ajax({
                    url:"month1.php";
                    method:"POST";
                    success:function(data) {
                        $('#link-con').html(data);
                    }
                });*/
            }
            $('#btn-month1').click(function(){
                    fetch_month1();
            });
});
$(document).on('click','#btn-month2',function(){
      fetch_month2();
});
function fetch_month2(){
  alert('fetch_month2 called');
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  
<div id="top-bar" name="top-bar">
    <button type="button" id="btn-month1" class="btn-month">Month 1</button>  
 <button type="button" id="btn-month2" class="btn-month">Month 2</button>  
</div>

Answer 2

像下面这样更改脚本，

script type="text/javascript">
        $(document).ready(function() {    
                $('#btn-month1').click(function () {
                    fetch_month1();
                  });
        });
 function fetch_month1()
            {
                $.ajax({
                    url:"month1.php",
                    method:"POST",
                    success:function(data) {
                        $('#link-con').html(data);
                    }
                });
            }
    </script>