ajax后的jQuery无法运行

I have the following code: There are 18 listelements which I want to click on. After I clicked on all of them, I need a modal to pop-up. If a do this way, it wont work, it works only on the 19th click

listPoints.each(function(i){
  $(this).attr('id', "list-point-" + i);
  $(this).click(function(){
    addPoint("list-point-" + i);
    if (checkPoints()) {
      $.ajax({
        type: 'GET',
        url: 'modal.html',
        dataType: 'html',
        success: function(html){
          $("body").append(html);
        }
      });
      $('#exampleModal').modal();
    }
  });
});

However if I put the modal show part in the ajax success part, without changing anything else, it works, the modal shows on the 18th, the last click, which is exactly I wanted

listPoints.each(function(i){
  $(this).attr('id', "list-point-" + i);
  $(this).click(function(){
    addPoint("list-point-" + i);
    if (checkPoints()) {
      $.ajax({
        type: 'GET',
        url: 'modal.html',
        dataType: 'html',
        success: function(html){
          $("body").append(html);
          $('#exampleModal').modal();
        }
      });
    }
  });
});

I can't realize the difference. Why is one working while the other isn't?