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

Question

我想添加一个新按钮来 select2 drop，即使用户无法获得结果，但在我将此按钮附加到之后，我无法使用 jquery click。

$('.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>