jQuery trigger("click") not working

Question

Can someone please explain what is wrong with the pasted code. It shows alert on hover but does not perform click event like I expect, and click does not work on either <a> tag or <select> tag. My purpose is to expand the select element on hover by triggering click event

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>

<body>
    <a id="linkElement" href="www.google.co.uk">click</a>

    <select name="cars" id="selectElemet">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>


    <script>
        $(document).ready(function () {
            $("#selectElement").mouseover(function () {
                $("#selectElement").trigger("click");
            });

            $("#linkElement").mouseover(function () {
                alert('here');
                $("#linkElement").trigger("click");
            });
        });
    </script>
</body>

</html>

instead of $("#linkElement").trigger("click"); use $("#linkElement").click(); — Sudhakar, Mar 31 '17 at 05:48
tried Both $("#linkElement").click(); and $("#selectElement").get(0).click(); still not working — Frankenstine Joe, Mar 31 '17 at 05:52
I'm afraid the answer is, it is not possible to programatically expand the select element. See http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list or http://stackoverflow.com/questions/19652085/open-dropdown-list-from-javascript-function — Arun P Johny, Mar 31 '17 at 05:52
Do u want to show select options list during hover? Is my understanding right? — Jagadeesh, Mar 31 '17 at 06:12
If so, please follow http://stackoverflow.com/questions/4599975/html-select-box-options-on-hover and let me know whether it is useful for you or not? Since Select tag is very difficult tag in html. We can't overwrite its property. So we have to move options are in ul li tags.. — Jagadeesh, Mar 31 '17 at 06:13
I think this answer is the closest to this question. It also is more generic in solution: https://stackoverflow.com/a/4473353/115237 — Noel Evans, Feb 10 '22 at 09:35

score 3 · Answer 1 · answered Mar 31 '17 at 05:45

3

.trigger("click") will not actually click the element, it will only trigger click handler attached with the element. Since you have not attached any none is triggered.

You can use native .click()

$("#selectElement").get(0).click(); //get(0) returns reference to DOM element

answered Mar 31 '17 at 05:45

Satpal

132,252
13
159
168

I don't think calling the native click will solve the OPs issue – Arun P Johny Mar 31 '17 at 05:49
@ArunPJohny, Agree, Just provide the reason why `trigger()` is not working – Satpal Mar 31 '17 at 05:50

JefferinJoseph · Answer 2 · 2017-03-31T05:48:53.263

2

There'a a spelling mistake in your ID attribute. Replace 'selectElemet' to 'selectElement'. Hope that helps.

edited Mar 31 '17 at 05:48

answered Mar 31 '17 at 05:48

JefferinJoseph

151
2
6

Thank you I fixed it but still not working – Frankenstine Joe Mar 31 '17 at 05:49
Could you try this instead, $("#linkElement").mouseover(function () { alert('here'); $(this).trigger("click"); }); – JefferinJoseph Mar 31 '17 at 05:53
The 'alert' here is interfering with your trigger function. Please remove it and try, it would work. – JefferinJoseph Mar 31 '17 at 06:03
For testing you could write a click handler for the element. $("#linkElement").on('click',function(){ alert('after click'); }); – JefferinJoseph Mar 31 '17 at 06:10

score 2 · Answer 3 · answered Mar 31 '17 at 05:59

2

trigger('click') just happen where you have set 'click' event with element ,not physical 'click'.for example,trigger('click') even don't trigger '' tag if attach without 'click'

answered Mar 31 '17 at 05:59

dandanbu2

31
2

score 1 · Answer 4 · answered Mar 31 '17 at 05:55

1

Try this,

$('#selectElement').on('change', function() {
});

answered Mar 31 '17 at 05:55

Kushan

10,657
4
37
41

score 1 · Answer 5 · answered Mar 31 '17 at 06:03

Add the click event handler to the element. Then only it will work.

Check the below snippet.

Try placing mouse over the link and it will trigger the click event handler.

$(document).ready(function() {
  $("#linkElement").mouseover(function() {
    $("#linkElement").trigger("click");
  });
  $("#linkElement").click(function(){
    window.location.href=$("#linkElement").attr("href");
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>

<body>
  <a id="linkElement" href="www.google.co.uk">click</a>

  <select name="cars" id="selectElemet">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
</body>

</html>

Thankyou for your answer . This works by redirecting the page via window.location.href = $("#linkElement").attr("href"); on tag But i need to open — Frankenstine Joe, Mar 31 '17 at 06:10
@FrankenstineJoe for that, I recomment you to use this question http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery — Sagar V, Mar 31 '17 at 06:46

jQuery trigger("click") not working

5 Answers5