javascript - Select2 无法在单击自定义无结果文本时绑定(bind)事件

Question

所以我使用 select2 并对其进行了初始化，但似乎无法将事件绑定(bind)到它。

这里是 html 标记

<div class="form-group customer-select">
                        <select class="form-control select2" style="width: 100%;">
                            <option selected="selected">Alabama</option>
                            <option>Alaska</option>
                            <option>California</option>
                            <option>Delaware</option>
                            <option>Tennessee</option>
                            <option>Texas</option>
                            <option>Washington</option>
                        </select>
                    </div>

第一次尝试。

            //Initialize Select2 Elements
        $('.select2').select2({
            "language": {
                "noResults": function(searchedTerm){
                    return "<a href='#' onclick='return showNewCustomerModalForm()' class='add-new-customer'  data-toggle='modal' data-target='#modal-default' style='cursor: pointer;'><i class='fa fa-plus'></i> Add New</a>";
                }
            },
            "escapeMarkup": function (markup) {
                return markup;
            }
        });

        function showNewCustomerModalForm() {
            alert(1);
        }

问题是，当我单击添加新时，警报从未显示。

第二次尝试。

//Initialize Select2 Elements
        $('.select2').select2({
            "language": {
                "noResults": function(searchedTerm){
                    return "<a href='#' class='add-new-customer'  data-toggle='modal' data-target='#modal-default' style='cursor: pointer;'><i class='fa fa-plus'></i> Add New</a>";
                }
            },
            "escapeMarkup": function (markup) {
                return markup;
            }
        });


        $('.customer-select').on('click', '.add-new-customer', function () {
            alert(1);
        });

任何人都可以帮助我至少在单击添加新时显示警报。提前致谢。

Answer 1

您可以试试这个解决方案:

//Initialize Select2 Elements
$('.select2').select2({
  "language": {
    "noResults": function(searchedTerm) {
      return "<a href='#' class='add-new-customer'  data-toggle='modal' data-target='#modal-default' style='cursor: pointer;'><i class='fa fa-plus'></i> Add New</a>";
    }
  },
  "escapeMarkup": function(markup) {
    return markup;
  }
});


$(document).on('click', '.add-new-customer', function() {
  alert(1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<div class="form-group customer-select">
  <select class="form-control select2" style="width: 100%;">
    <option selected="selected">Alabama</option>
    <option>Alaska</option>
    <option>California</option>
    <option>Delaware</option>
    <option>Tennessee</option>
    <option>Texas</option>
    <option>Washington</option>
  </select>
</div>