How to tell if a dynamic has been clicked on javascript

Question

How to tell if a dynamic has been clicked on javascript

Navigation

#1 by (3 votes)

2

I need to know if a particular id of a dynamically created <a> has been clicked.

 formatters: {

             return " <a href= '#'  class='btn btn-warning btnAlterarSolicitacao'  data-idSolicitacao='" + row.Id + "' id=btnFazerSolicitacaoEdicao" + row.Id +  "  data-colaboradorLatam='" + row.ColaboradorLatam + "' data-BP='" + row.BP + "' data-EmailColaborador='" + row.EmailColaborador + "' data-EspecieArquivo='" + row.EspecieArquivo + "' data-TipoArquivo='" + row.TipoArquivo + "' data-toggle='tooltip' data-placement='top' title='Editar' data-acao='Edit'data-row-id ='" + row.Id + "' > " +
                    "<span class='glyphicon glyphicon-edit'></span></a> &nbsp;"


            })

And this is the javascript that was trying to get it.

The most I could get was to list them, I would like to know how to get this id that was clicked.

$(".text-left").find('*').each(function () {
    var id = $(this).attr("id");
    if (id !== undefined) {
       console.log(id);
    }

});

constructor

function configurarControles() {

    var traducao = {
        infos: "Exibindo {{ctx.start}} até {{ctx.end}} de {{ctx.total}} registros", // 
        loading: "Carregando, isso pode levar alguns segundos...",
        noResults: "Não há dados para exibir",
        refresh: "Atualizar",
        search: "Pesquisar"
    }



        var controlarGrid = {
            ajax: true,
            url: urlListar,
            labels: traducao,
            statusMappins: {
                0: "Finalizado",
                1: "No prazo",
                2: "Atenção próximo ao prazo do SLA",
                3: "Prazo do SLA excedido"
            },
            searchSettings: {
                characters: 2
            },
            formatters: {

                "status": function (column, row) {
                    var totalDias = row.numeroDias;

                    if (totalDias >= 3) {
                        return " <button href= '#' class='btn btn-success'></button>";
                    } else if (totalDias < 3 && totalDias >= 0) {
                        return " <button href= '#' class='btn btn-warning'></button>";
                    } else if (totalDias < 0) {
                        return " <button href= '#' class='btn btn-danger'></button>";
                    }


                },

                //return diffDays;

                "data": function (column, row) {
                    return row.Day + "/" + row.Month + "/" + row.Year;

                },
                "DtSla": function (column, row) {
                    return row.dia + "/" + row.mes + "/" + row.ano;

                },  


                "acoes": function (column, row) {

                    return " <a href= '#' class='btn btn-warning'  data-toggle='tooltip' data-placement='top' title='Editar' data-acao='Edit'data-row-id ='" + row.Id + "' > " +
                        "<span class='glyphicon glyphicon-edit'></span></a> &nbsp;"
                        +
                        "<a href='#' class='btn btn-danger' data-toggle='tooltip' data-placement='top' title='Excluir'  data-acao='Delete' data-row-id ='" + row.Id + "' > " +
                        "<span class= 'glyphicon glyphicon-trash'></span></a>&nbsp "
                        +
                        "<a href='#' class='btn btn-info' data-toggle='tooltip' data-placement='top' title='Detalhar'  data-acao='Details' data-row-id ='" + row.Id + "' >" +
                        "<span class='glyphicon glyphicon-list'></span></a>";
                },
                "atualizar": function (column, row) {

                    return " <a href= '#' class='btn btn-warning'  data-toggle='tooltip' data-placement='top' title='Editar' data-acao='Edit'data-row-id ='" + row.Id + "' > " +
                        "<span class='glyphicon glyphicon-edit'></span></a> &nbsp;"
                        +

                        "<a href='#' class='btn btn-info' data-toggle='tooltip' data-placement='top' title='Detalhar'  data-acao='Details' data-row-id ='" + row.Id + "' >" +
                        "<span class='glyphicon glyphicon-list'></span></a>";
                },
                "AtualizarSolicitacoes": function (column, row) {
                    console.log(row);
                    return " <a href= '#'  class='btn btn-warning btnAlterarSolicitacao'  data-idSolicitacao='" + row.Id + "' id=btnFazerSolicitacaoEdicao" + row.Id +  "  data-colaboradorLatam='" + row.ColaboradorLatam + "' data-BP='" + row.BP + "' data-EmailColaborador='" + row.EmailColaborador + "' data-EspecieArquivo='" + row.EspecieArquivo + "' data-TipoArquivo='" + row.TipoArquivo + "' data-toggle='tooltip' data-placement='top' title='Editar' data-acao='Edit'data-row-id ='" + row.Id + "' > " +
                        "<span class='glyphicon glyphicon-edit'></span></a> &nbsp;"
                        +

                        "<a href='#' class='btn btn-info' data-toggle='tooltip' data-placement='top' title='Detalhar'  data-acao='Details' data-row-id ='" + row.Id + "' >" +
                        "<span class='glyphicon glyphicon-list'></span></a>";
                },

                "nomeSolicitante": function (column, row) {
                     return row.Solicitante.Nome;
                },
                //"DescricaoGAreaCliente": function (column, row) {

                //    return row.GAreaCliente.Descricao;
                //}
                "DescricaoUf": function (column, row) {
                   return row.Uf.Descricao;
                },
                "AnoOrcamentario": function (column, row) {
                    return row.DtRemessa.substring(6,10)
                }
            }
        }
        var grid = $("#gridDados").bootgrid(controlarGrid);
        //assim que carrega o bootgrid
        grid.on("loaded.rs.jquery.bootgrid", function () {

            $('[data-toggle="tooltip"]').tooltip();
            //pesquisa os botões de list, update e delete
            grid.find("a.btn").each(function (index, elemento) {



                var botaoDeAcao = $(elemento);
                //descobre de qual tipo é o botão
                var acao = botaoDeAcao.data("acao");

                //pega qual id do campo
                var idEntidade = botaoDeAcao.data("row-id");

                botaoDeAcao.on("click", function () {

                    //chamada modal para os demais botões
                    abrirModal(acao, idEntidade);

                });
            });
        });
        // chamada modal para os botões de create
        $("a.btn").click(function () {

            var acao = $(this).data("action");

            abrirModal(acao, null);
        });
    }

    function abrirModal(acao, parametro) {

        var url = "/{ctrl}/{acao}/{parametro}";

        url = url.replace("{ctrl}", controller);
        url = url.replace("{acao}", acao);

        if (parametro !== null) {

            url = url.replace("{parametro}", parametro);
        }
        else {
            url = url.replace("{parametro}", "");
        }

        $("#conteudoModal").load(url, function () {

            $("#minhaModal").modal('show');
        });

    }

javascript jquery

asked by anonymous 06.08.2018 / 15:51

1 answer

Value of a text variable do select a Select item in javascript How to execute a JAVASCRIPT code by PHP without event

score 3 · Accepted Answer

You can take the click for any attribute you have in the collection. For example, you can get the class .btnAlterarSolicitacao , using the method .on() with delegation ( $(document) ):

$(document).on("click", ".btnAlterarSolicitacao", function(event){

   event.preventDefault();
   console.log($(this).attr("id")); // imprime o atributo id

});

In your specific case, it may be event conflict with class .btn . Try using another event, type:

$(document).on("mouseenter", "a[data-idsolicitacao]", function(){
   var id = $(this).attr("id");
   console.log(id);
});

The problem with mouseenter is that the button will be activated simply because the mouse passes over it. The same recommendation was to change events without the class .btn , since it is very generic and could conflict with other events click .