位于 select2 组件内的按钮的单击事件不会触发答案

【问题标题】：Click event of a button, located inside a select2 component, does not trigger位于 select2 组件内的按钮的单击事件不会触发
【发布时间】：2021-08-05 21:58:52
【问题描述】：

我不知道我是否做错了，但是“btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco”按钮点击事件没有触发。我相信我在加载 select2 时构建事件是错误的。有谁知道如何帮助我？

谢谢:)

$("#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!')

});

<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>

【问题讨论】：

标签： javascript jquery asp.net-core-mvc jquery-select2

【解决方案1】：

Select2 4.0.0 之前的版本（3.5.x 及以下），请参考this answer about binding to onSelect。

对于 Select2 的较新版本，我尝试了最新版本（4.1.0-rc.0），以下代码可以为我工作：

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

我的整个工作演示：

<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>

}

【讨论】：

【解决方案2】：

除了将click 事件绑定到动态元素之外，您还可以尝试在Jquery ready function 中进行如下操作。

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

请确认是否有帮助。

【讨论】：