javascript - <a> 元素上未触发单击事件

Question

我有多个a元素。我正在尝试处理单击事件以在警报中显示 id单击的链接但没有发生任何事情。请帮忙!

$(".sites").click(function() {
  alert('handlin');
  alert($(this).attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="sites" id="1">test1</a>
<a href="#" class="sites" id="2">test2</a>

链接在此处生成:

$.getJSON(categoriesURL, {
  term: request
}, function(data) {
  var iHtml = '';
  $.each(data, function(i, item) {
    if (10 <= i) 
      return false;
    iHtml += '<li><a href="#" class="sites" id="'+item.id+'">' + (item.title || '') + '</a></li>';
  });
  $('#categories').append(iHtml);
});

Answer 1

你必须在ajax调用完成后绑定(bind)事件

 function bindButtonClick(){
       $(document).on('click', '.sites', function() {
      alert('handlin');
      alert($(this).attr("id"));
    });
    }

$.getJSON(categoriesURL, {
  term: request
}, function(data) {
  var iHtml = '';
  $.each(data, function(i, item) {
    if (10 <= i) 
      return false;
    iHtml += '<li><a href="#" class="sites" id="'+item.id+'">' + (item.title || '') + '</a></li>';
  });
  $('#categories').append(iHtml);
  bindButtonClick();
});