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

Question

我不知道我是否做错了，但是“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>

Answer 1

您可以在 Jquery ready function.

中尝试类似下面的内容，而不是将 click 事件绑定到动态元素

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

请确认是否有帮助。

Answer 2

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>

}

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

Click event of a button, located inside a select2 component, does not trigger

javascript

jquery

jquery-select2

asp.net-core-mvc