bootstrap 多选刷新后无法取消绑定和重新使用搜索按钮

Question

我正在使用 js bootstrap 多选 http://davidstutz.de/bootstrap-multiselect/ 并尝试通过 ajax 加载选项。在下面的演示中，我使用了一些静态数据。

两者都是第一次使用，但我无法在刷新 multiselect 后再次单击按钮 (.multiselect-menu .multiselect-search-icon)。

我试图将点击设置为关闭等...但无济于事。重建多选后，我还尝试再次添加按钮。这就是我所拥有的：

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

  });

});

如何重复使用搜索按钮，以便搜索在控制台中不断出现？

这是一个fiddle Fiddle:

https://jsfiddle.net/hp7orjma/

如果您打开并单击搜索图标...您可以在控制台中看到 'search'...但它不会重复执行一次。

Answer 1

我不太熟悉 jQuery 但我的猜测是，当您出于某种原因重置数据提供程序时，页面会重新生成或类似的情况导致搜索图标失去侦听器。我将代码拆分成更小的函数，这样调试就更容易了。这对我有用。

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();
  });
}

如果您使用这些函数，请将准备好的侦听器更改为以下内容：

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

bootstrap 多选刷新后无法取消绑定和重新使用搜索按钮

Can't unbind and reuse search button after refresh of bootstrap multiselect

javascript

jquery

bootstrap-multiselect

jquery-events