Javascript ajax之后的jQuery没有'；跑不动

我有以下代码：有18个列表元素我想点击。在我点击了所有的按钮之后，我需要一个模式来弹出。如果a这样做，它将不起作用，它只在第19次点击时起作用

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

然而，如果我把模态显示部分放在ajax成功部分中，而不改变任何其他内容，它就会工作，模态显示在18号，最后一次单击，这正是我想要的

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

我没有意识到区别。为什么一个工作而另一个不工作？

#例如，如果您获得成功，则可能来自html。
从您的第一个代码：

如
$（'#exampleModal'）.modal（）在ajax成功之前执行，因此它可能找不到该元素。
您正在迭代列表项和$（'exampleModal'）.modal（）；在所有迭代中重复，但编译器将仅将模式附加到最后一项，因为id不能重复

但在第二种情况下，id（“exampleModal”）最初不是由编译器执行的，因为ajax将由浏览器执行，成功部分将在后面的部分执行。因此，每当您单击列表项时，它将附加到该列表项。
是否选中html变量？ajax是异步的。在第一个代码段中，
.modal（）
将在
成功
回调之前运行。请检查Google chrome中的控制台，可能存在一些错误或问题。