Question

所以我使用select2并初始化它，但似乎我无法将事件绑定到它。

这里是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>

选择2无法绑定事件，点击自定义无结果文字

1 个答案: