JS递归过多

I have a JS/jQuery code, works like a charm, until I want to run another funcion (I have even duplicate some functions, but no luck still got the same error even when the original function is triggered before)

I have checked syntax and line to line, but no luck, please, I need another pair of eyes to see what I'm not seeing.

Context: When I click button, it open an ajax modal, I have added some html highliths, if full code is required please advice.

Ps. not native english speaker, sorry for any mistake or understood with it.

The html code (only important lines, this it's the original html the one who triggers the modal):

<form method="post" id="serviceOrdersAddForm" data-user-token="<?php echo $_SESSION['userToken']; ?>" action="main/serviceOrders/addController.php">

<a class="btn btn-info form-control addClientHandler" data-client-modal="true" id="serviceOrderServiceTypeIdBtn" href="ajax/addClientModal.php">Nuevo Cliente</a>

</form>

The JS code:

// ADD CLIENT MODAL
(function($) {
 'use strict';
 var ClientModal = {
  initialize: function() {
   this.$body = $( 'body' );
   this.events();
  },

  events: function() {
   var _self = this;
   var elem;
   this.$body.find( '[data-client-modal="true"]' ).on( 'click', function( e ) {
    e.preventDefault();
    elem = 'addClientHandler';
    _self.show(elem);
    console.log('hola');
   });
   return this;
  },

  clickBtn: function (){
   $('.showFormErrors ul li').remove();

   $('#clientsAddFormContainer > .showFormErrors').addClass('d-none');
   var userToken = $('#serviceOrdersAddForm').attr('data-user-token');
   var userRut = $('#serviceOrderCreationUserRut').attr('value');
   var _self = this;
   var parametros = {
    "userToken" : userToken, 
    "userRut" : userRut, 
    "clientRut" :  clientRut,
    "clientType" :  clientType, 
    "clientName" :  clientName, 
    "clientMiddleName" :  clientMiddleName,
    "clientLastName" :  clientLastName, 
    "clientSureName" :  clientSureName, 
    "clientAddress" :  clientAddress,
    "clientCommuneId" :  clientCommuneId, 
    "clientEmail" :  clientEmail, 
    "clientphone" :  clientphone
   };

   var url = 'main/clients/addController.php';
   ajaxSetter(parametros, url, 'post').then( function(data){
    //here success
    // _self.hide();
   }).catch(err => alert(err));
  },

  clientCheck: function ( clientType ){
   var checkType = (clientType == 1) ? 'clientRut' : 'clientRut1';
   var fieldName = $('#' + checkType).val();
   var userToken = $('#serviceOrdersAddForm').attr('data-user-token');
   var userRut = $('#serviceOrderCreationUserRut').attr('value');

   var parametros = { "userToken" : userToken, "userRut" : userRut, "clientType" : clientType, "clientRut" : fieldName, "tableName" : 'clients' };
   var url = 'main/clients/checkClient.php';
   ajaxSetter(parametros, url, 'post').then( function(data){
    if(data == "0"){
     $("#clientRutStatusLbl").removeClass( "text-danger text-dark" ).addClass( "text-success" );
     $("#clientRutStatusLbl").text("Cliente Nuevo");
     $("#clientRutStatusLblInnerDiv").show();
     $("#clientSubmitBtn").prop("disabled", false);
    }else{
     $("#clientRutStatusLbl").removeClass( "text-success text-dark" ).addClass( "text-danger" );
     $("#clientRutStatusLbl").text("Cliente Registrado");
     $("#clientRutStatusLblInnerDiv").show();
     $("clientSubmitBtn").prop("disabled", true);
    }
   }).catch(function (err){
    console.log(err);
   });
  },
  show: function( elem ) {
    var _self = this;
    $('.'+elem).magnificPopup({
     type: 'ajax',
     callbacks: {
      close: function() {
       // console.log('Popup closed');
      },
      ajaxContentAdded: function() {
       $('#clientRut').mask("99.999.999-*").focus(); //agrego mascara y focus al rut
       $('#clientphone').mask("999-99999999");
       $('#clientCommuneId').attr("data-source", "ajax/getCommunes.php") //instancio el select de comunas
                            .attr("data-valueKey", "id")
                            .attr("data-displayKey", "comuna")
                            .attr("data-plugin-selectTwo");
       $('#clientCommuneId').attr("data-plugin-selectTwo"); //instancio el select de tipo usuario
       setSelect2("clientCommuneId"); // inicializo el select de comunas
       setSelect2("clientType"); // inicializo el select de comunas
       loadSelectOptGrp("clientCommuneId");

       $('#clientCommuneId').on('change', function() { //quito seleccione cuando muevo el select
        deleteSelectDefault("clientCommuneId");
       });

      $('#clientType').on('change', function() { //listener cuando cambia tipo de cliente
       _self.clientTypeChanged(this.value);
      });

      $('#clientRut').on('change', function( ) { // listener cuando dejo el campo clientRut                   
       _self.clientCheck(1);
      });

      $('#submitBtnAddClientModal').click(function() { // listener cuando presiono enviar
       _self.clickBtn();
      });
     }
    }
   });
  },

  hide: function() {
   $.magnificPopup.close();
  },
 };

 this.ClientModal = ClientModal;
 $(function() {
  ClientModal.initialize();
 });

}).apply(this, [jQuery]);

there are some global function calls but I'm only including the important one

/**
 ** Ejecuta una consulta ajax
 ** @param parametros incluye toda la data a enviar
 ** @param url el archivo donde se ejecuta el php
 ** @param type tipo, usualmente POST
**/
function ajaxSetter(parametros, url,type) {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: url,
      data: parametros,
      type: type,
      success: function(data) {
        console.log('Ajax Success: ');
        console.log(data);
        resolve(data) // Resolve promise and go to then()
      },
      error: function(err) {
        console.log('Ajax Success: ');
        console.log(data);
        reject(err) // Reject the promise and go to catch()
      }
    });
  });
}

there's a lot of spanglish on my code, I know :(

So two problems, first one, everytime I click the addClientHandler anchor I got a console output (function "events" 7 line console.log('hola'); ), I have to click twice to open de modal, but got two "hola" on console, I know I'm missing somethings to open the modal on the first click.

The second problem it's when I click submitBtnAddClientModal, it should run the clickBtn function, instead in Chrome I got

RangeError: Maximum call stack size exceeded"

and in Firefox

"InternalError: "too much recursion"

It doesn't even make the XHR call :( not sure whats going on.

I've even replace the code on clickBtn with the one on clientCheck (that works smoothly and fine no matter when or where I call it, inside its own limits for sure)

any advice will be very appreciate,

thanks in advance to everyone who try to help!

So after a hours of test, and console.log debugging I found the answer...

Variables wasn't set (facepalm) don't know why it doesnt throw the undefined instead of breaking the whole call.

that'll be homework after I finish this project.

Thanks for reading!