Requete ajax multipliée

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'appelle une modal boostrap au click pour afficher 2 boutton valider ou annuler la validation d'une recette de cuisine Lorsque je clique sur valider un appel ajax est lancé et modifie le champ de validation de la recette qui passe de 1 a 0 et vice verca Tout fonctionne bien de ce coté là Mais une fois que je ferme la modal j'ai fait en sorte qu'elle se détruise automatiquement. Ensuite lorsque je relance un appel ajax ça me lance plusieurs appels ajax (correspondant au nombre de fois que l'user a ouvert la modal)

Code de l'object bupModal js qui me permet de personnaliser une modal boostrap

bupModal={
            modalC:''
                +'<div class="modal-dialog">'
                    +'<div class="modal-content">'
                        +'<div class="modal-header">'
                            +'<h5 class="modal-title" id="titleModal">Modal title</h5>'
                            +'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'
                            +'<span aria-hidden="true">×</span>'
                            +'</button>'
                        +'</div>'
                        +'<div class="modal-body">'
                            +'<div class="container-fluid">'
                            +'</div>'
                        +'</div>'
                        +'<div class="modal-footer">'
                        +'</div>'
                    +'</div>'
                +'</div>'+
            '',
            addparam:{
                scrollable:false,
                hasFooter:false,
                isLarge:false,
                isCentered:false,
                isFadeClose:true
            },
            param:{
                class:"modal fade",
                role:"dialog",
                tabindex:-1,
                "data-backdrop":null,
                "data-focus":true,
                "data-keyboard":true,
                "aria-labelledby":"titleModal",
                "aria-modal":true
            },
            identifier:"thismodal",
            myModal:null,
            titlemodal:"",
            bodycontent:"",
            // A definir a la creation de la fenetre modal
            footerContent:"",
            defineContent:function (myModal) {
                if (!myModal.find(".modal-dialog").is(":visible")){
                    myModal.append(this.modalC);
                }

                myModal.find(".modal-body > .container-fluid").html(this.bodycontent);
                myModal.find(".modal-title").text(this.titlemodal);
            },
            defineParam:function (mymodal) {

                footModal=mymodal.find('.modal-footer');
                bodyModal=mymodal.find('.modal-dialog');

                if(this.addparam.scrollable){
                    bodyModal.removeClass('modal-dialog-scrollable').addClass('modal-dialog-scrollable');
                }

                // Definit si la modal aura un footer ou pas
                if (!this.addparam.hasFooter) {
                    footModal.hide();
                }
                else{
                    if (this.footerContent!=='') {
                        footModal.html(this.footerContent);
                        footModal.show();
                    }
                    else{
                        footModal.hide();
                    }

                }

                // Definit si la modal sera ou non centrée
                if(this.addparam.isCentered){
                    bodyModal
                    .removeClass('modal-dialog-centered')
                    .addClass('modal-dialog-centered');
                }
                else{
                    bodyModal
                    .removeClass('modal-dialog-centered');
                }

                // Definit la largeur de la modal
                if (typeof(this.addparam.isLarge)==='string' && $.inArray(this.addparam.isLarge,['lg','sm','xl'])!==-1) {
                    bodyModal
                    .removeClass('modal-'+this.addparam.isLarge)
                    .addClass('modal-'+this.addparam.isLarge);
                }
                else{
                    bodyModal.removeClass('modal-lg modal-sm modal-xl');
                }
            },
            opentoClose:function (myModal, doOnclose=null) {
                // Evenement enclenche lorsque la modal est completement cachee(inexistant)
                myModal.on('hidden.bs.modal',function (e) {
                    if (bupModal.addparam.isFadeClose) {
                        myModal.remove();
                    }

                    hasClass = $('body').attr('class');
                    if(hasClass===''){
                        $('body').removeAttr('class');
                    }

                    $("body").find('.modal-backdrop').remove();

                    if (typeof doOnclose ==="function") {
                        doOnclose(myModal);
                    }

                    $(this).find(".modal-dialoag").off("mouseenter").end()
                        .off("click shown.bs.modal hidden.bs.modal keydown click");
                })
                // Evenement enclenche lorsque la modal est completement affichee
                .on('shown.bs.modal',function (e) {
                    $this = $(this)
                    thepadding = {
                        paddingRight:''
                    }
                    $this.css(thepadding);
                    $('body').css(thepadding);
                    hasStyle = $('body').attr('style');
                    if(hasStyle===''){
                        $('body').removeAttr('style');
                    }
                    $(window).resize(function () {
                        $this.css(thepadding);
                    })
                })
                if(this.myModal===null && typeof myModal ==='object'){
                    this.myModal=myModal;
                }

            },
            create:function (bodycontent,titlemodal,gParam={},gAddparam={}) {
                this.bodycontent=bodycontent;
                this.titlemodal=titlemodal;

                $.extend(this.addparam, gAddparam);
                $.extend(this.param, gParam);

                $('body').find("#"+this.identifier).remove();
                $("body").find('.modal-backdrop').remove();
                $('<div id="'+this.identifier+'"></div>').insertAfter('body header');
                myModal = $('body').find('#'+this.identifier);
                this.myModal=myModal;
                myModal.attr(this.param);

                // Defini le contenu de la modal (body)

                this.defineContent(myModal);
                this.defineParam(myModal);

                myModal.modal('show');
                // Traitement de la modal a la fin d'affichage et a la fin de fermeture
                this.opentoClose(myModal);

            },
            update:function (gParam={},gAddparam={}) {
                $.extend(this.addparam, gAddparam);
                $.extend(this.param, gParam);

                if (typeof this.myModal !=='object') {
                    myModal = $('body').find('#'+this.identifier);
                    this.myModal=myModal;
                }

                if (typeof this.myModal === 'object' && this.titlemodal!=='' && this.bodycontent!=='') {
                    this.defineParam(this.myModal);
                    this.opentoClose(this.myModal);
                }
            },
        }

Code js/ajax

$('body')
.on("click","input[name=visible]",function () {
    $this = $(this);
    idrec = parseInt($this.closest('tr').attr('id').split('rec')[0]);
    idauth = parseInt($this.closest('tr').attr('id').split('rec')[1]);
    bupModal.footerContent=''+
        '<button id="cancel" class="btn btn-secondary" type="button">Annuler</button>'
        +'<button id="valid" class="btn btn-success" type="button">Approuver</button>'+
    '';
    bupModal.create("Etes vous sur de vouloir vraiment valider cette recette et ainsi là publier sur Eatandsell ?","Confirmation de validation",{},{
        hasFooter:true
    });

    $("body").on("click","button#cancel",function () {
        $("body").find("#"+bupModal.identifier).modal("hide");
    })
    .on("click","button#valid",function () {

        popAjax.initCall("/recettes/approuved-rec/" + idrec + "-" + idauth + "/", function (data, state, jq) {
            alert(data);
        });
    });
})

popAjax est un object qui me permet de personnaliser une requete jquery.ajax Sa méthode popAjax.initCall prends en paramètre l'url et le callback en cas de succès d'une requete

J'aimerai m'affranchir de cela et avoir des appel single pour chaque click sur le boutton valider

Merci d'avance pour vos idées

Je crois que c'est ce que PrimFx fait un peu partout sur le forum (suppression, meilleur reponse, signaler d'un message). Son aide et éventuellemnt de toute autre personne en mesure de le faire sera la bienvenue