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>

It's part of an attempt to address an issue with bootstrap-select I'm currently dealing with. — Jeff Shain
– Jeff Shain, Commented Nov 1, 2013 at 18:16
I cannot duplicate your problem. Please construct a concise demo in a jsFiddle. — Sparky
– Sparky, Commented Nov 1, 2013 at 20:06
The inline JS is messy and shouldn't be required when using jQuery. So let's assume your attempt at fixing another issue through the usage of inline click handlers is misguided... what happens when you remove every single inline onClick and focus your attention on good, clean jQuery code? — Sparky
– Sparky, Commented Nov 1, 2013 at 20:09
@VIVINPALIATH in case you weren't aware, jQuery is JavaScript. — Ryan
– Ryan, Commented Jul 13, 2016 at 22:35

Alvaro · Accepted Answer · 2016-11-12 20:49:09Z

51

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

edited Nov 12, 2016 at 20:49

answered Nov 12, 2016 at 20:42

Alvaro

9,81210 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adrian Enriquez Over a year ago

In my case I needed higher timeout. I set it to 500.

zzlalani · Accepted Answer · 2013-11-01 18:11:11Z

3

Let's try:

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

edited Nov 1, 2013 at 18:11

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

answered Nov 1, 2013 at 18:10

Norbert Pisz

3,4403 gold badges30 silver badges43 bronze badges

1 Comment

Jeff Shain Over a year ago

I've amended the question so you can see the larger issue. I trigger the click after I run $(main_id).selectpicker('refresh'); and it doesn't toggle the button.

Collectives™ on Stack Overflow

Programmatically click a button using jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related