jQuery .click() not working inside .click function

Question

I have some jquery on a selection of buttons. When this is run the button is clicked automatically (last line of the code) and it fires the 'button clicked' message. When the correct button is manually pressed (one with a category of 'overall_size'), the function runs, the 'button clicked' message is fired, the css on the original button is changed but it is NOT clicked again. It's the same code as appears at the bottom which obviously works fine.

Pressing the 'correct' button should result in the 'button clicked' message firing TWICE and the css changing.

Any ideas what the issue might be?

<script type="text/javascript">
    
    $('.option_select').click( function(e) {
       
        console.log('button clicked');

        var category = $(this).data('category');

        if(category == 'overall_size') {
           $('.btn-byo-group-active.usb_memory_selector').css('color', 'red'); // WORKS
           $('.btn-byo-group-active.usb_memory_selector').click(); // NOT WORKING
        }

    });
 
    // 1st call (automatic)
    $('.btn-byo-group-active.usb_memory_selector').click();

Did you attached event handler with `$('.btn-byo-group-active.usb_memory_selector')` element? If no, then try `$('.btn-byo-group-active.usb_memory_selector').get(0).click()` to get native element and the trigger its event handler — Satpal, Oct 27 '20 at 15:27
It would be better if you can elaborate on the problem, we might be able to come up with a better solution — Satpal, Oct 27 '20 at 15:34
Its part of a big price calculator where you choose different options, clicking a will hide section b and c etc etc. After each 'change' the form is ajaxed off to get the result. It would be too messy/hard to explain the actual logic behind it. I narrowed my issue down to the code above. The rest of it should work fine now I think. Thank you for your help! — TempPeck, Oct 27 '20 at 15:45
@Satpal - do you want to post it as an answer so I can mark it as the correct one? I don't think I can mark a comment as the correct answer — TempPeck, Oct 27 '20 at 15:48

Jasar Orion · Answer 1 · 2020-10-27T15:33:28.360

0

you cannot call click like your doing. you need to trigger the action try it:

$( ".btn-byo-group-active.usb_memory_selector" ).trigger( "click" );

Look at this example

 $('.element').click( function(e) {
       
        $(this).html("Clicked");

});
$( ".element" ).trigger( "click" );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='element'>
Hi!!
</div>

edited Oct 27 '20 at 15:33

answered Oct 27 '20 at 15:28

Jasar Orion

626
7
26

`$('.btn-byo-group-active.usb_memory_selector').click()` is short hand for `$('.btn-byo-group-active.usb_memory_selector').trigger( "click" )` – Satpal Oct 27 '20 at 15:29
Test your snippet with `$( ".element" ).click();` once – Satpal Oct 27 '20 at 15:35
it works but some browsers dont acept the short mode `click()` you can read more about here: https://stackoverflow.com/questions/9666471/jquery-advantages-differences-in-trigger-vs-click – Jasar Orion Oct 27 '20 at 15:37
1

Unfortunately this didn't work for me - Satpals .get(0).click() solution did – TempPeck Oct 27 '20 at 15:42

score -1 · Answer 2 · answered Oct 27 '20 at 15:28

-1

To trigger events on elements you should use .trigger() method.

.trigger( eventType [, extraParameters ] ) Returns: jQuery

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

answered Oct 27 '20 at 15:28

Eriks Klotins

4,042
1
12
26

jQuery .click() not working inside .click function

2 Answers2