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?