Programmatically click a button using jquery

Question

I have this button:

<div class="btn-group bootstrap-select show-tick span12 reg-form-control validate[required]"> <button id="control-qid13228" type="button" class="btn dropdown-toggle btn-bootstrap" data-toggle="dropdown" data-id="qid13228">     <div class="filter-option pull-left">3 of 4 selected</div>&nbsp;<div class="caret"></div> </button> <div class="dropdown-menu open" style="max-height: 249px; overflow: hidden; min-height: 92px;">     <ul class="dropdown-menu inner" role="menu" style="max-height: 237px; overflow-y: auto; min-height: 80px;">         <li rel="0" class="selected"><a tabindex="0" onclick="update_reg_multi_click('qid13228','basketball');" style=""><span class="text">basketball</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>         <li rel="1"><a tabindex="0" onclick="update_reg_multi_click('qid13228','baseball');" style=""><span class="text">baseball</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>         <li rel="2" class="selected"><a tabindex="0" onclick="update_reg_multi_click('qid13228','football');" style=""><span class="text">football</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>         <li rel="3" class="selected"><a tabindex="0" onclick="update_reg_multi_click('qid13228','hockey');" style=""><span class="text">hockey</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>     </ul> </div> 

I've tried to click it programmatically using JQUERY

    <script> $(document).ready(function(){     $("#control-qid13228").click(); });                          </script> 

I've also tried a trigger click:

    <script> $(document).ready(function(){     $("#control-qid13228").trigger("click"); });                          </script> 

Neither seem to work. Clicking with my mouse, of course, works fine. Any ideas?

Just a heads up, this is part of an attempt to address a different issue I'm having with bootstrap-select, addressed in this script in progress.

        function update_reg_multi_click(id,myvalue)          {             //             var main_id = $("#" + id);             var main_id_control = $("#control-" + id);             var main_id_option = $("#" + id + " " + ">" + " " + "option");             var main_id_value = $(main_id).val();                            var this_div = $(this);             if(main_id_value != null){                 var main_id_value_list = $("#" + id).val().toString();                 var test_if_in_list=main_id_value_list.toLowerCase().indexOf(myvalue) >= 0;                 if(test_if_in_list){                     //alert('in list');                     $(main_id_option).each(function() {                         $(this).removeAttr("selected");                     });                                              var newlist = remove_reg_val(main_id_value_list,myvalue,",");                                                $.each(newlist.split(','), function(){                       var option_to_set = $("#" + id + " " + "option[value="+this+"]");                       $(option_to_set).attr('selected','selected');                     });                     $(main_id).selectpicker('refresh');                      }                 else{                     //alert('not in list');                                          $(main_id_option).each(function() {                         $(this).removeAttr("selected");                     });                                                  //alert(main_id_value_list);                     var newlist = main_id_value_list + ","+myvalue;                     //alert(newlist);                     $.each(newlist.split(','), function(){                       var option_to_set = $("#" + id + " " + "option[value="+this+"]");                       $(option_to_set).attr('selected','selected');                     });                     $(main_id).selectpicker('refresh');                                                  }             }             else{                 var newlist = myvalue;                 $.each(newlist.split(','), function(){                   var option_to_set = $("#" + id + " " + "option[value="+this+"]");                   $(option_to_set).attr('selected','selected');                 });                 $(main_id).selectpicker('refresh');                                                                        }                                    } 

Here is the select I'm trying to address:

<select name="qid13228" id="qid13228" class="selectpicker span12 reg-form-control validate[required]" data-style="btn-bootstrap" multiple="" data-selected-text-format="count&gt;2" style="display: none;">  <option value="basketball" onClick="update_reg_multi_click('qid13228','basketball');" selected="selected">basketball</option>  <option value="baseball" onClick="update_reg_multi_click('qid13228','baseball');">baseball</option>  <option value="football" onClick="update_reg_multi_click('qid13228','football');">football</option>  <option value="hockey" onClick="update_reg_multi_click('qid13228','hockey');" selected="selected">hockey</option>  </select> 

Answer 1

Add a small timeout:

$(document).ready(function(){      setTimeout(function(){          $("#control-qid13228").click();       },1);  }); 

https://jsfiddle.net/46my242x/1/

or try:

$("#control-qid13228")[0].click(); 

https://jsfiddle.net/46my242x/2/

This is a similar question: jQuery.trigger('click') not working

Answer 2

Let's try:

<script> $(document).ready(function(){     $("#control-qid13228").click(function(){         alert('clicked');     }); });                      </script>