I have a button created on a function like:

function onDataBound(e) {
   $(this).find(".btn-group").append("
   <a class='dropdown-item text-danger is-active' 
   onclick='showSweetAlert("   dataItem.AdvertiserId ", "   dataItem.IsActive  ")'
   type='button'>Mark Inactive
   </a>");
     });
        }

As you can see it calls a new function:

function showSweetAlert(id, isActive){
   document.addEventListener('click',function(e)
   {
       if (isActive) {
       Swal.fire
       ({
           title:"Are you sure?",
           text:"This will inactivate the advertiser!",
           icon:"warning",
           showCancelButton:!0,
           confirmButtonColor:"#2ab57d",
           cancelButtonColor:"#fd625e",
           confirmButtonText:"Inactivate"
       }).then(function(result){
           if(result.isConfirmed){
               $.ajax({
               url:'/Advertisers/ActiveAdvertiser?id=' id '&isActive=' isActive,
               method: 'POST',
               success: function(r){
                    Swal.fire("Inactivated!", "Advertiser inactivated successfully", "success");
                   },
               error: function (request) {
                   console.log(request.responseText)
                Swal.fire("Error!", "Something went wrong, please try again`", "warning");
                   }
                  });

           }
           else{
              Swal.fire("Error!", "Something went wrong, please try again", "warning");
               }
       }
       )
       }
})
   }

This function displays a Sweet Alert 2

The alert has 2 buttons, but the problem starts when I click one, it just does not change the state, the alert just reappears infinite times and I can not close it. I think the problem is on the showSweetAlert function call but I can not find the real issue.

CodePudding user response：

The problem is that your showSweetAlert function doesn't respond to the click. It ADDS another onclick event handler but this time to the document (the whole page). So when you first click you add an event handler to the document that responds to the click you gave and add another alert which you will click again and because the listener is in the whole page it will answer again and again and again.

Here, try this way:

function showSweetAlert(id, isActive){
    if (isActive) {
       Swal.fire({
           title:"Are you sure?",
           text:"This will inactivate the advertiser!",
           icon:"warning",
           showCancelButton:!0,
           confirmButtonColor:"#2ab57d",
           cancelButtonColor:"#fd625e",
           confirmButtonText:"Inactivate"
       }).then(function(result){
           if(result.isConfirmed){
               $.ajax({
                   url:'/Advertisers/ActiveAdvertiser?id=' id '&isActive=' isActive,
                   method: 'POST',
                   success: function(r){
                       Swal.fire("Inactivated!", "Advertiser inactivated successfully", "success");
                   },
                   error: function (request) {
                       console.log(request.responseText)
                       Swal.fire("Error!", "Something went wrong, please try again`", "warning");
                   }
               });

           } else {
              Swal.fire("Error!", "Something went wrong, please try again", "warning");
           }
       })
    }
}

Here's an working example without the ajax part:

let dataItem = { AdvertisedId: 1, IsActive: true}

function showSweetAlert(id, isActive){
    if (isActive) {
       swal({
           title:"Are you sure?",
           text:"This will inactivate the advertiser!",
           icon:"warning",
           showCancelButton:!0,
           confirmButtonColor:"#2ab57d",
           cancelButtonColor:"#fd625e",
           confirmButtonText:"Inactivate"
       }).then(function(result){
           if(result){
               dataItem.IsActive = false;
               swal("Inactivated!", "Advertiser inactivated successfully", "success");
                 } else {
               dataItem.IsActive = true;
               swal("Error!", "Something went wrong, please try again`", "warning");
           }
                     console.log('after', dataItem);       
       })
    }
}

console.log('before', dataItem);
$(document).find(".btn-group").append("<a class='dropdown-item text-danger is-active' onclick='showSweetAlert("   dataItem.AdvertiserId ", "   dataItem.IsActive  ")' type='button'>Mark Inactive</a>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='btn-group'>
    <h1>
    Test
    </h1>
</div>