How to attach events to dynamically created elements and pass parameters?

Question

I have a table that is generated via ajax and a certain column generates a link. As it has been implemented, currently, it writes a code html with javascript intrusive. Something like below:

return "<a href=\"#\" id=\"detalhe-nota-" + record.data.id + "\" class=\'modal-detalhe-nota\' onclick=\"exibirModalDetalheNota(" + record.data.id + ")\">" + value + "</a>";

The html generated comes out something like:

<a href="#" id="detalhe-nota-80549984" onclick="exibirModalDetalheNota(80549984)">23628</a>

I would like to link the event click to this link by its id attribute, but since id is dynamic I don’t know how to do it. An alternative solution with jquery would be using the markup css modal-detalhe-nota, as below:

$(document).on("a.modal-detalhe-nota", "click", function(e) { });

From what I understood by the elements to be created dynamically, they should have their events linked in this way and not in the form below:

$("a.modal-detalhe-nota").on("click", function(e) {});

I have two doubts:

• How to link the event to the id attribute?
• How to pass a parameter to the function? Because this id that is generated dynamically is parameter.

Answer 1

In jQuery it is possible to assign events to a newly created element, even if it has not yet been inserted into body.

What I usually do is create this element and at the same time already assign your event by jQuery. Then I can add it to HTML.

Example:

function criaLinkDinamico(callback, i) {

  var $link = $('<a/>', {
               'class' : 'minha-classe',
               'id' : 'meu-id-dinamico' + i
             });

 return $link.click(callback);

}

Then something like:

 var links = [];

 for (var i = 1; i < 10; i++) {

    var link = criaLinkDinamico(function ()
    { 
       console.log($(this).attr('id'));

    }, i));

    links.push(link);
 }

 $('html').append(links);

If you need to pass a parameter to an element, you can encapsulate the callback.

Small example:

function criarCallbackParametro(nome)
{
  return function (e) {

    e.preventDefault();

    $('body').append(nome);
  }
}


$(function()
{
    $('#el-1').click(criarCallbackParametro('Wallace'));
  
    $('#el-2').click(criarCallbackParametro('Miguel'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="el-1">add Wallace</button>
<button id="el-2">add Miguel</button>

 $('.meu_elemento').click(criarCallbackParametro('wallace'));

 $('.meu_elemento').click(criarCallbackParametro('miguel'));

Answer 2

Using your workaround is possible. These ID’s can be added with a type attribute data-* where * should be replaced by a.

Modify the Javascript that generates the link to:

return '<a href="#" data-detalhe-nota="' +
  record.data.id + '" class="modal-detalhe-nota">' +
  value + '</a>';

jQuery has the function .data() that accesses attribute values data-* directly, this way it will not be necessary to pass as parameter.

$(document).on("a.modal-detalhe-nota", "click", function(e) {
  var id = $(this).data('detalhe-nota'); // obter o ID
});

Answer 3

Utilizing everything you already have just by performing the .on dynamic by id:

$('a[id^="detalhe-nota-"]').on('click', function(){
    var id = $(this).attr('id');
    var numberId = id.replace(/\D/i, '');
    callfunction(numberId);
});