javascript: click event is not triggered when dropdown is open

Question

here is my html

  <div class="test">
            <div class="select">
              <select name="slct" id="slct">
                <option class="default_option" value="A">A</option>

                <option value="AAAA">AAAA</option>
                <option value="CNAME">CNAME</option>
                <option value="MX">MX</option>
                <option value="NS">NS</option>
                <option value="PTR">PTR</option>
                <option value="SOA">SOA</option>
                <option value="SRV">SRV</option>
                <option value="TXT">TXT</option>
                <option value="CAA">CAA</option>
              </select>
            </div>
          </div>

I want to trigger an event when dropdown menu is opened.

so, I have written this jquery,

 $('.test').click(function () {
    // $(this).parent().toggleClass("active");
    console.log('hello');
  });

But the problem is, the console is not printed when the dropdown is opened. the console is printed when the dropdown is closed.

@s.kuznetsov I mean when I open the dropdown. I need to trigger an event. but in my current implementation, the event triggers when I click on the first option from dropdown. — Ashik
– Ashik, Commented Jun 6, 2021 at 10:24

Mamun · Accepted Answer · 2021-06-06 10:27:14Z

1

I think you are attaching the event before the DOM is fully loaded

You should attach the event inside $(document).ready(function(){...

OR: Use .on() which ensure that the event will be attached to the element that is added to DOM at a later time.

Also, if you want the code to be executed only when open you should use focus:

$('body').on('focus', '.test', function () {

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $('body').on('focus', '.test', function () {
    // $(this).parent().toggleClass("active");
    console.log('hello');
  });
</script>

<div class="test">
  <div class="select">
    <select name="slct" id="slct">
      <option class="default_option" value="A">A</option>

      <option value="AAAA">AAAA</option>
      <option value="CNAME">CNAME</option>
      <option value="MX">MX</option>
      <option value="NS">NS</option>
      <option value="PTR">PTR</option>
      <option value="SOA">SOA</option>
      <option value="SRV">SRV</option>
      <option value="TXT">TXT</option>
      <option value="CAA">CAA</option>
    </select>
  </div>
</div>

edited Jun 6, 2021 at 10:27

answered Jun 6, 2021 at 10:03

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

5 Comments

Ashik Over a year ago

the event is triggered, when I click on the dropdown options. but, what I want is, immediately trigger the event, as soon as the dropdown is open

Mamun Over a year ago

@Ashik, did you try focus event which I have mentioned in the updated answer?

Ashik Over a year ago

yep. it is fixed now. what I have currently done is this: gist.github.com/ashiqdev/8e1ebefd1e3cf15c12b06e315bf434bb but the problem is, when I focus again, event is not triggered

Mamun Over a year ago

@Ashik, focus event works once, to make that work you lose the event by clicking else where and focus again:)

Ashik Over a year ago

clicking elsewhere means? by writing code, click elsewhere? actually, when a focus event is triggered I apply a class so that the dropdown icon is changed. so, when user again clicks on the dropdown icon I need to apply the same thing.

SuspenseFallback · Accepted Answer · 2021-06-06 10:03:02Z

0

you can use a custom dropdown, not the <select> element

answered Jun 6, 2021 at 10:03

SuspenseFallback

14810 bronze badges

Collectives™ on Stack Overflow

javascript: click event is not triggered when dropdown is open

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related