select2-drop 和 select2-no-results 添加按钮后，如何在 Select2 中调用点击事件？

Question

我想为 select2 添加一个新按钮，即使用户无法获得他们的结果，但在我将此按钮附加到之后我无法使用 jquery 单击。

$('.city').select2({
        formatNoMatches: function(term) {
            return "<a href='{{route('addNewIterms')}}' class='btn btn-info btn-sm' id='add'> Add New Item </a>";
        }
    });
Another solution
$('.select2-drop ').append("<a href='{{route('addNewIterms')}}' class='btn btn-info btn-sm' id='add'> Add New Item </a>");

但是我无法调用点击事件，尽管我已尝试 jquery dom 如下所示的事件

$(document).on('click','.select2-drop,.select2-drop#add', function(){
        console.log(this)
})

Answer 1

我认为 formatNoMatches 已从 Select2 中删除。

您必须使用以下语法：

$('#e1').select2({
  formatNoMatches: function(term) {            
     return "<button class='btn btn-info btn-sm' id='add'>Add a new item</button>";
  }, 
});

$('.select2-container').on('click', '#add', function() {
  alert('New Item Here!');
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<select multiple id="e1" style="width:300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

select2-drop 和 select2-no-results 添加按钮后，如何在 Select2 中调用点击事件？

How to call click event in Select2 after add a button to select2-drop and select2-no-results?

javascript

jquery

jquery-select2

select2