select2-dropとselect2-no-resultsにボタンを追加した後、Select2でclickイベントを呼び出す方法は？

Question

私はjQueryのクリックを使用することはできません後に私はこのボタンを追加した後も、ユーザーが結果を得ることができないselect2のドロップに新しいボタンを追加したい。

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

しかし、私はformatNoMatchesがSelect2から削除されていることを考える

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

Answer 1

以下のように私はjQueryのDOMイベントにしようとしているがイベントをクリックして呼び出すことはできません。

次の構文を使用する必要があります：あなたの質問は不明である

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