0

I have a DataTable in my Index in which the lines are loaded using JavaScript. The Edit, Details, Delete, and History buttons are created together. All of them open in a modal window (the modal block is inside the Index) ... In the html of each button there is a "data-modal" attribute in which it will serve as reference for the onclick event that will cause that button to open in the Modal window.

"columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "descricao", "name": "Descricao", "autoWidth": true },
            { "data": "pessoaTipoDescricao", "name": "PessoaTipo", "autoWidth": true },
            {
              
                "render": function (data, type, full, meta) {
                    return '<a btnEditar title="Editar" data-modal="" href="/situacoes-gerenciamento/editar-situacao/' + full.id + '" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row"><span class="icon-2x wb-edit"></span></a> |' +
                           '<a title="Detalhes" data-modal="" href="/situacoes-gerenciamento/situacao-detalhes/' + full.id + '" class="btn btn-sm btn-icon btn-pure btn-default on-default footable-row-detail-row"><span class="icon-2x wb-search"></span></a> |' +
                           '<a title="Excluir" asp-action="Delete" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row"><span class="icon-2x wb-trash"></span></a> |' +
                           '<a title="Histórico" class="btn btn-sm btn-icon btn-pure btn-default on-default clockpicker" data-toggle="modal" data-target="#pessoaHistory" data-original-title="Histórico"><span class="icon-2x wb-time"></span></a>'
                }
            }
        ],

Problem: Clicking on the "Edit" button, the "data-model" attribute does not seem to be recognized and the onclick event is not working:

 $('a[data-modal]').on('click', function (e) {
        // Abre a janela modal com o formulário solicitado 
        openmodal(this.href);
        return false;
    });

Does anybody know how to solve this?

Master JR
  • 231
  • 2
  • 11
  • 1
    When are you calling `$('a[data-modal]').on('click'...`? If it is before your buttons are made and put in the DOM this won't work, possible duplicate of [Event binding on dynamically created elements?](/questions/203198/event-binding-on-dynamically-created-elements) – Patrick Evans Jun 09 '18 at 14:51
  • 1
    Change to `$('table').on('click', 'a[data-modal]', function...` . read up on [Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) – charlietfl Jun 09 '18 at 14:54
  • Thank you @charlietfl !!!! Resolution: $('table').on('click', 'a[data-modal]', function (e) { openmodal(this.href); return false; }); – Master JR Jun 09 '18 at 15:03
  • @charlietf please comment on your resolution in the main post so I set it as answered .... Thank youuuu :) – Master JR Jun 09 '18 at 15:05
  • Is already marked as duplicate. See link at top of page – charlietfl Jun 09 '18 at 15:06

0 Answers0