刷新引导程序多选后无法解除绑定和重用搜索按钮

Question

I'm using js bootstrap multiselect http://davidstutz.de/bootstrap-multiselect/ and trying to load the options via ajax. In the below demonstration I used some static data.

Both work the first time, but I can't click the button ( .multiselect-menu .multiselect-search-icon ) again after I refresh the multiselect .

I tried to set the click off etc. ... but nothing helps. I also tried to add the button again after the multiselect is rebuilt. That's what I have:

$(document).ready(function() {

  $('#DTE_Field_groups_access-user_id').multiselect({
    maxHeight: 250,
    buttonWidth: '100%',
    enableCaseInsensitiveFiltering: true,
    nonSelectedText: 'Select',
    templates: {
      ul: '<ul class="multiselect-container dropdown-menu multiselect-menu"></ul>',
      filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon multiselect-search-icon" style="cursor:pointer;"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
      li: '<li class="ms-item"><a class="myCheckboxLink" tabindex="0"><span class="myCheckboxSpan"><i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i></span><label></label></a></li>'
    }
  });
    
    var searchField = '';
    searchField += '<li class="multiselect-item filter" value="0">'
    + '<div class="input-group">'
    + '<span class="input-group-addon multiselect-search-icon"><i class="glyphicon glyphicon-search"></i></span>'
    + '<input class="form-control multiselect-search" type="text" placeholder="Search">'
    + '<span class="input-group-btn">'
    + '<button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button>'
    + '</span>'
    + '</div>'
    + '</li>'
    $('.multiselect-menu').append(searchField);

    $('.multiselect-menu li.multiselect-item .input-group-addon').css({"cursor": "pointer"});
    $('.multiselect-menu li.ms-item').css({"display": "none"});
    

  //$('.multiselect-menu .multiselect-search-icon').on('click', function (e) {
  $('#accessTemplate').on('click', '.multiselect-menu .multiselect-search-icon', function(e) {
    e.preventDefault();
    e.stopPropagation();
    console.log('search');

    var arrUserID = [{
        label: "peter.pan@testvulcano.com (1)",
        value: "1"
      },
      {
        label: "joe.shark@hollaholla.com (2)",
        value: "2"
      },
      {
        label: "lord.rabbit@quickthunder.com (3)",
        value: "3"
      }
    ];

    $('#DTE_Field_groups_access-user_id').multiselect('dataprovider', arrUserID);
    $('#DTE_Field_groups_access-user_id').multiselect('refresh');

  });

});

How can I reuse the search button so the search keeps coming in the console?

Here is a fiddle Fiddle:

https://jsfiddle.net/hp7orjma/

If you open and click on the search icon ... you can see in the console 'search' ... but it won't do it more than once.

Answer 1

I'm not really familiar with jQuery but my guess is that when you reset the dataprovider for some reason the page gets regenerated or something like that which causes the search icon to lose the listener. I split the code into smaller functions so this way debugging is easier. This worked for me.

function setData() {
  var arrUserID = [
    {
      label: "peter.pan@testvulcano.com (1)",
      value: "1",
    },
    {
      label: "joe.shark@hollaholla.com (2)",
      value: "2",
    },
    {
      label: "lord.rabbit@quickthunder.com (3)",
      value: "3",
    },
  ];

  $("#DTE_Field_groups_access-user_id").multiselect("dataprovider", arrUserID);

  $("#DTE_Field_groups_access-user_id").multiselect("rebuild");
  reset();
}

function reset() {
  $("#search").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    setData();
  });
}

If you use these functions change your ready listener to the following:

$(document).ready(function () {
  $("#DTE_Field_groups_access-user_id").multiselect({
    maxHeight: 250,
    buttonWidth: "100%",
    enableCaseInsensitiveFiltering: true,
    nonSelectedText: "Select",
    templates: {
      ul:
        '<ul class="multiselect-container dropdown-menu multiselect-menu"></ul>',
      filter:
        '<li class="multiselect-item filter"><div class="input-group"><span id="search" class="input-group-addon multiselect-search-icon" style="cursor:pointer;"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
      li:
        '<li class="ms-item"><a class="myCheckboxLink" tabindex="0"><span class="myCheckboxSpan"><i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i></span><label></label></a></li>',
    },
  });

  var searchField = "";
  searchField +=
    '<li class="multiselect-item filter" value="0">' +
    '<div class="input-group">' +
    '<span id="search" class="input-group-addon multiselect-search-icon"><i class="glyphicon glyphicon-search"></i></span>' +
    '<input class="form-control multiselect-search" type="text" placeholder="Search">' +
    '<span class="input-group-btn">' +
    '<button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button>' +
    "</span>" +
    "</div>" +
    "</li>";
  $(".multiselect-menu").append(searchField);

  $(".multiselect-menu li.multiselect-item .input-group-addon").css({
    cursor: "pointer",
  });
  $(".multiselect-menu li.ms-item").css({ display: "none" });
  //$('.multiselect-menu .multiselect-search-icon').on('click', function (e) {
  reset();
});