How to hang two scripts on one div?

Question

JavaScript

Hello everyone
Guys, plz tell me how you can solve this problem:
There is a button on the webcam, by clicking on it using ajax, the value of this button is transmitted to the server. The script on the server makes a selection and returns this selection to the webcam, where it is inserted into the submenu. The problem is that each time the button is clicked, a selection procedure will occur.
Question: is it possible to somehow "optimize" the process so that on the first click the transfer script is executed, and on the next n clicks it is just a drop-down menu with already received values?
(most likely a crazy idea, but the whole world is full of madness :) )

Answer 1

You can check the menu for submenus. If not, then we make a request.
$(".submenu ul li").length > 0

Answer 2

We put the handler on the click in which we make the request and delete the current handler. We put a new one after processing the request.

°• The simplest

button.onclick = function(){
   delete button.onclick;
   var xhr = new XMLHttpRequest();
   ....
   xhr.onload = function(){
         //Что-то делаем
         button.onclick = function(){
             //Выпадание меню
         }
   }
}

°•If there are other handlers on the button

button.addEventListener("click", function one(){
   button.removeEventListener("click", one);
   var xhr = new XMLHttpRequest();
   ....
   xhr.onload = function(){
         //Что-то делаем
         button.addEventListener("click", function(){
             //Выпадание меню
         });
   }
});

°• Same with jQuery

$(button).one("click", function(){
   $.ajax(...).done(function(){
         //Что-то делаем
         $(button).click(function(){
             //Выпадание меню
         });
   });
});

Answer 3

.append() ? I did not understand the question...

Answer 4

If I understood you correctly, something like this:

var resultReturned = true;
$("#button").click(function(){
   if(resultReturned===false){
     return;
   }
   $.ajax({
     url: "test.html",
     beforeSend: function() {
        resultReturned = false;
     }
    }).always(function() {
        resultReturned = true;
        //обрабатываем результат
    });
});