How tho check if button was clicked inside function onClick?

Question

I have a marker that when that marker is clicked a model appears. Inside that model I have 3 buttons with 3 different functions. Inside the function onClick (of the marker) I wan't to check which of the tree button inside the model where clicked. SOmething along the lines of

if(('#button').isclicked == true)
 {
     aceite();
 }

It's important to note that my buttons are hidden and they're added by another function using append.

variables:

  var aceite = document.getElementById("aceite");
   var recusado = document.getElementById("recusado");
   var concluido = document.getElementById("concluido");

Here is the function that adds the buttons:

function getData(id) {

    $.get(`/api/IgnicoesAPI/${id}`, function (data) {

        //o div terá que ser limpo para que a informação não seja subreposta
        document.getElementById("myDiv").innerHTML = "";
        document.getElementById("buttons").innerHTML = "";

        //Indicação do id e do estado da ignição clicada 
        $('#myDiv').append('<h3><b>Avaliação da Ignição</b></h3>');
        $('#myDiv').append('<p>Estado:' + data.estado + '</p>')
        $('#myDiv').append('<p>ID: ' + id + '</p>');

        $.each(data.listaOcorrencias, function (o, ocorrencia) {
            //é adicionado as imagens correspondente a cada ocorrencia pertecentes á ignição clicada
            $('#myDiv').append('<img src="imagensFogos/' + ocorrencia.fotografia + '" onclick="openModal();" class="hover-shadow" style="width:200px; height:190px" hspace="4"/>');

        });

        //adição dos botões que alteram o estado da ignição
        $('#buttons').append('<button id="aceite" style="background-color:#4CAF50;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); margin:5px;">Aceitar</button>');
        $('#buttons').append('<button id="recusado" style="background-color:#f44336;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;">Recusar</button>');
        $('#buttons').append('<button id="concluido"  style="background-color:#008CBA;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;" > Concluído</button>');

    });
}

Here is the piece of code where I want to check which button was clicked:

          $.get("/api/IgnicoesAPI", function (data) {



        console.log(data);
        $.each(data, function (i, item) {

        //More Code

        var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })

            .on('click', function onClick(e) {

                var id = item.id;

                clickedmarker = e.target;

                 if(aceite.isclicked == true)
                 {
                     //calls function
                 }
                  //Same for the other two buttons

              modal.style.display = "block";

                getData(id);
            }).addTo(map);







            //adiciona marador ao mapa
            $('#json map').append(marker);
        });// fim each
    });//fim do get

Show where you added your click handler for the aceite button. e.g.: Looking to see your code that looks something like: `$('#aceite').click(function () { aceite.isclicked = true; })` (Or maybe you didn't, and that's the problem.) — Wyck, Feb 22 '20 at 13:06
You can use this method. https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript — Umair Khan, Feb 22 '20 at 13:13

score 0 · Answer 1 · answered Feb 22 '20 at 13:07

You could add a data attribute to the button elements when they are clicked, and then check which buttons have those attributes.

$(button).click(function(){
   $(this).attr("data-clicked", true)
})

You might want to add a specific class to the buttons when creating them to target them with a selector above, or you could generate the buttons with createElement and add the event with addEventListener.

Then you can target all clicked buttons in jquery by just finding the buttons with that attribute: $("button[data-clicked]")

Or to check if a button is clicked you can use buttonElement.hasAttribute("data-clicked")

How tho check if button was clicked inside function onClick?

1 Answers1