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?

#exampleModal might be coming from html you are getting in succes. From your first code :-

As $('#exampleModal').modal(); is executed before the ajax success and hence it might not find that element.

You are iterating through list item and $('#exampleModal').modal(); is repeating in all iteration however compiler will attach the modal to the last item only as id cannot be duplicate.

But in second scenario, id ("exampleModal") is not executed initially by the compiler because ajax will be executed by browser and success part will be executed in later part.so whenever you click list item, it gets attach to that list item.