刷新引导多项选择后无法取消绑定并重新使用搜索按钮

问题描述

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

两者都是第一次工作，但是刷新.multiselect-menu后我无法再次单击按钮（.multiselect-search-icon multiselect）。

我尝试设置点击关闭等。。。但是没有任何帮助。重建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: "[email protected] (1)",value: "1"
      },{
        label: "[email protected] (2)",value: "2"
      },{
        label: "[email protected] (3)",value: "3"
      }
    ];

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

  });

});

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

这是一个小提琴小提琴：

https://jsfiddle.net/hp7orjma/

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

解决方法

我对jQuery并不真正熟悉，但是我的猜测是，由于某种原因而重置数据提供者时，页面会重新生成或类似的操作导致搜索图标失去侦听器。我将代码拆分为较小的函数，因此调试起来更容易。这对我有用。

function setData() {
  var arrUserID = [
    {
      label: "[email protected] (1)",value: "1",},{
      label: "[email protected] (2)",value: "2",{
      label: "[email protected] (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();
});