javascript - Select2 Could not bind event on clicking custom no results text -
so use select2 , initialize seems can't bind event it.
here html markup
<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>
first attempt.
//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); }
the problem alert never shown when click add new.
second attempt.
//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); });
can me atleast show alert when clicking add new. in advance.
you can try solution:
//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>
Comments
Post a Comment