Javascript Can'；t刷新引导multiselect后取消绑定并重用搜索按钮

我正在使用js引导multiselect并试图通过ajax加载选项。在下面的演示中，我使用了一些静态数据

这两个选项都是第一次使用，但在刷新

多选

后，我无法再次单击按钮（

.multiselect menu

.multiselect search icon）

我试着把咔嗒声关掉等等。。。但没有任何帮助。我还尝试在重建multiselect后再次添加按钮。这就是我所拥有的：

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

  });

});

$（文档）.ready（函数（）{
$（“#DTE_字段_组_访问-用户_id”）。多选({
最大高度：250，
按钮宽度：“100%”，
enableCaseInsensitiveFiltering:正确，
非选定文本：“选择”，
模板：{
ul:“
”，
过滤器：'
，
li:“

如果打开并单击搜索图标…您可以在控制台中看到“搜索”…但它不会重复执行多次。
我对jQuery不是很熟悉，但我猜当您出于某种原因重置数据提供程序时，页面会重新生成，或类似的情况导致搜索图标丢失侦听器。我拆分了code转换成更小的函数，这样调试就更容易了。这对我很有用

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

如果使用这些函数，请将ready listener更改为以下内容：

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

$（文档）.ready（函数（）{
$（“#DTE_字段_组_访问-用户_id”）。多选({
最大高度：250，
按钮宽度：“100%”，
enableCaseInsensitiveFiltering:正确，
非选择文本：“选择”，
模板：{
保险商实验室：
“
”，
过滤器：
“
”，
锂：
“
”，
},
});
var searchField=“”；
搜索区+=
“
”+
'' +
'' +
'' +
'' +
'' +
"" +
"" +
“
”；
$（“.multiselect menu”）.append（搜索字段）；
$（“.multiselect菜单li.multiselect-item.input组加载项”）.css({
光标：“指针”，
});
$（“.multiselect menu li.ms item”）.css（{display:“none”}）；
//$（'.multiselect menu.multiselect search icon'）。打开（'单击'，函数（e）{
重置（）；
});
因为您正在删除事件处理程序….
$（“#accessTemplate”）.off（'click'，'.multiselect菜单.multiselect搜索图标'）；
有趣的是，您竟然没有提到这一行……您能显示一个新的工作小提琴吗？：-）…我想我需要插入这一行来重新激活按钮…@BrianTompsett-汤莱恩 ... 再次移除，谢谢！