0

I don't know if I'm doing it wrong, but the "btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco" button click event isn't firing. I believe I'm wrong in building the event when select2 is loaded. Does anyone know how to help me?

Thanks :)

$("#MySelect").select2({
    tags: "true",
    createTag: function () {
        // Dessabilita a inserção quando Enter for pressionada
        return null;
    },
    placeholder: "Selecione uma opção",
    allowClear: false,
    width: '100%',
    dropdownParent: genericModal,
    language: {
        noResults: function () {
            return "Nenhum resultado encontrado";
        }
    },
    templateResult: function (data) {
        var $result = $("<span></span>");
        //console.log('data', data.id);
        $result.text(data.text);
        //$result.append('<button data-id="' + data.id + '" class="btn">' + data.text + '</button>');
        $result.append('<button data-id="' + data.id + '" class="btn btn-icon btn-default btn-outline btn-sm btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco"><i class="icon wb-edit"></i></button>');

        return $result;
    }
}).on('click', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (b) {
   alert('Evento disparado!')

});

enter image description here

<div class="col-md-4">
    <label asp-for="ParentescoTipoId" class="control-label">Tipo de Parentesco</label>
    <select asp-for="ParentescoTipoId" asp-items="Model.ParentescosTipos" id="MySelect" title="Selecione uma opção" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;"><option value=""></option></select>
    <span asp-validation-for="ParentescoTipoId" class="text-danger"></span>
</div>
Rena
  • 30,832
  • 6
  • 37
  • 72
masterj
  • 67
  • 6

2 Answers2

1

For versions of Select2 before 4.0.0 (3.5.x and below), you should refer to this answer about binding to onSelect.

For newer versions of Select2, I have tried the newest version(4.1.0-rc.0), the following code could work for me:

$(document).on('mouseup', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (e) {
    alert("Evento disparado!")
})

My whole working demo:

<select id="MySelect" title="Selecione uma opção" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;">
</select>
@section Scripts{
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#MySelect').select2({
                minimumInputLength: -1,
                placeholder: 'Search',
                data: [{
                    id: 1,
                    text: "aaa"
                }, {
                    id: 2,
                    text: "bbb"
                }],
                templateResult: function (data) {
                    var $result = $("<span></span>");
                    console.log('data', data.id);         
                    $result.text(data.text);
                    $result.append('<button data-id="' + data.id + '" class="btn btn-icon btn-default btn-outline btn-sm btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco"><i class="icon wb-edit"></i></button>'); 
                    return $result;
                }
            });    
        });

        //add this....
        $(document).on('mouseup', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (e) {
            alert("asdadad")
        })
      
    </script>

}
Rena
  • 30,832
  • 6
  • 37
  • 72
0

Instead of binding the click event to the dynamic element, you may try something like below within the Jquery ready function.

$("body").on('click', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (b) {
   alert('Evento disparado!');
});

Please confirm if it helps.

Shinto Joy
  • 31
  • 6