如何点击Bootstrap Select实时搜索输入框触发弹窗提示？

嘿，我来帮你搞定这个问题～你的代码没生效主要是因为Bootstrap Select的搜索框是动态生成的DOM元素——当你执行那行jQuery代码的时候，这个搜索输入框可能还没被组件创建出来，所以事件根本没绑定到它身上。

下面给你两个靠谱的解决方案：

方案一：等组件初始化完成再绑定事件 #

Bootstrap Select自带了loaded.bs.select事件，会在组件完全初始化好、所有动态元素都生成后触发。我们可以利用这个时机来绑定点击事件：

// 先监听组件初始化完成的事件
$('#id1').on('loaded.bs.select', function() {
  // 此时搜索框已经存在，直接绑定点击事件
  $(this).closest('.bootstrap-select').find('.bs-searchbox input').on('click', function() {
    alert("live searching ..");
  });
});

// 别忘了初始化Bootstrap Select（如果还没执行的话）
$('.selectpicker').selectpicker();

方案二：用事件委托（更推荐） #

事件委托是把事件绑定到静态存在的父元素上，通过事件冒泡来触发动态元素的事件，不用等元素生成，兼容性和灵活性都更好：

// 把事件委托到document上（或者你页面里存在的更接近的静态父元素）
$(document).on('click', '#id1 ~ .bootstrap-select .bs-searchbox input', function() {
  alert("live searching ..");
});

// 初始化组件
$('.selectpicker').selectpicker();

补充说明 #

如果你的页面里有多个Bootstrap Select组件，一定要用目标组件的id（比如这里的#id1）来精准定位对应的搜索框，不然点其他组件的搜索框也会触发这个弹窗哦～

内容的提问来源于stack exchange，提问作者Lmnop