bugfix> javascript > 投稿

<select class="selectpicker form-control" data-live-search="true" name = "name1" id ="id1">
   <option>Option1</option>
   <option>Option1</option>
   <option>Option1</option>
   <option>Option1</option>
 </select>

ブートストラップ選択ライブ検索入力ボックスをクリックしたときにアラートをトリガーする方法は?

私はこれを試してみましたが、機能しません。

$(this).closest('.bootstrap-select').find('.bs-searchbox input').on('click',function(){
    alert("live searching ..");
})

任意の提案をいただければ幸いです。

前もって感謝します。

回答 1 件
  • おそらく正しい解決策があります(多分)

    select 以来 -鬼ごっこ 後で置き換える( onload の後  イベント)、保存側にあるため、 "より良いタイムアウト付き。
    alert を交換します   config.info を呼び出す  コール。

    setTimeout(function(){
      var newBox = $("#selectControl").get(0).parentNode;
           
      $(newBox).find("input").on("click",function(){
        console.info("live searching ..");
      });
      
     }, 1000);
    
    
    <body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/base.css">
    <link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/custom.css">
    <link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css">
    <div class="container">  
    <div>
    <select class="selectpicker" data-live-search="true" id="selectControl">
       <option data-tokens="Option 1">Option 1</option>
       <option data-tokens="Option 2">Option 2</option>
       <option data-tokens="Option 3">Option 3</option>
       <option data-tokens="Option 4">Option 4</option>
     </select>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js" >
    </script>
    <script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" >
    </script>
    <script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
    </script>    
            
        </body>
    
    

    ところで: コントロールの詳細は、このGithubで見つけることができますが、グーグル-ing

あなたの答え