Question

我想添加一个新按钮来选择2掉落，即使用户无法得到他们的结果，但在我追加此按钮后，我无法使用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中移除。

您必须使用以下语法：

＆＃13;

$('#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!');
})

＆＃13;

<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>

＆＃13;

如何在添加按钮以选择2-drop并选择2-no-results后，在Select2中调用click事件？

1 个答案: