Javafx - button-click event, inside a table, does not work

Question

I am in a Javafx project where I needed to make an autocomplete in an input. We have some plugins that can be used, but the autocomplete was so simple that we prefer to do on hand same.

Here is the HTML:

<div class="input-group">
    <input type="text" class="form-control" name="nome" id="nome"/>
    <input type="text" style="display: none" class="form-control" name="cod-nome" id="cod-nome"/>
    <div class="input-group-btn">
        <button type="button" data-toggle="modal" data-target="#modal_addNome" class="btn btn-default">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        <button type="button" data-toggle="modal" data-target="#modal_pesqNome" class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </div>
</div>
<div id="divNomes" class="table table-bordered table-striped" style="position: absolute; z-index: 500; background-color: #ffffff; width: 93%; display: none">
    <table style="margin-left: 10px">
        <tbody id="tabNomes"></tbody>
    </table>
</div>

Basically, with each keyup done in the input, we look in a historical the names of people that contain the willing string. From the result, we put this in a table below the input, just with the names, one per line. This works well, and it’s pretty fast. The problem is picking up the event by clicking on each name.

We are mounting the table as follows:

function montarListaAutocomplete(arrayKeyValue) {
    $('#tabNomes').empty();
    for (var i in arrayKeyValue) {
        $('#tabNomes').append('<tr><td><button onclick="selecionarNome(' + arrayKeyValue[i].value + ')" class="autoComplete" type="button">' + arrayKeyValue[i].key + '</button></td></tr>');
    }
}

On each line I place this Function on onclick passing a value, in case an id.

That’s the whole point. The table is mounted, the names are arranged in the autocomplete, but as soon as I click, it should do something (selectName()), but simply does nothing. Not even a console.log works.

Here is the function that clears the table and/or arrow a display:None in it:

function configAutocomplete() {
    $('#nome').on('focus', function() {
        $('#divNomes').css('display', 'block');
        nomeController.autoCompleteNome($('#nome').val());
    });
    $('#nome').on('keyup', function() {
        nomeController.autoCompleteNome($('#nome').val());
    });
    $('#nome').on('blur', function() {
        $('#divNomes').css('display', 'none');
        $('#tabNomes').empty();
    });
}

Reminding people, I’m making a Javafx application using HTML, CSS, Javascript and, of course, Java.

Does anyone have any idea what I might be doing wrong?

Answer 1

If you add this statement to your configAutocomplete()

$('#tabNomes').on('click','button',function(){
    var id = $(this).attr('data-id');
    if (id) selecionarNome(id);
    else return false;
});

And change the montarListaAutocomplete() to make $('#tabNomes').append('<tr><td><button data-id="' + arrayKeyValue[i].value + '" class="autoComplete" type="button">' + arrayKeyValue[i].key + '</button></td></tr>'); he has work.

---

Explaining:

• configAutocomplete() puts the event by event delgation (this means that, no matter when the element is put on the page, it will always respond to the click)
• the function montarListaAutocomplete declares the date-id attribute on the new button that the configAutoComplete() need to call the selecionarNome()