Question

我有以下代码：有18个要单击的列表元素。单击所有它们之后，我需要弹出一个模式。如果这样做，将无法正常工作，仅在第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();
        }
      });
    }
  });
});

我不知道有什么区别。为什么一个工作而另一个却不工作？

Answer 1

#exampleModal可能来自成功的HTML。从您的第一个代码：-

由于$('#exampleModal').modal();是在ajax成功之前执行的，因此它可能找不到该元素。

Answer 2

您正在遍历列表项和$（'＃exampleModal'）。modal（）;在所有迭代中重复执行，但是仅当id不能重复时，编译器才会将模式附加到最后一项。

但是在第二种情况下，编译器最初不会执行id（“ exampleModal”），因为ajax将由浏览器执行，成功部分将在以后的部分中执行。因此，每当您单击列表项时，它都会附加到该列表项上列表项。

ajax后的jQuery无法运行

2 个答案: