All Browsers except Firefox don't react to jQuery .click()

Question

I have the following HTML/Twig structure

            <select name="herstellerSelect" class="categoryElement" id="herstellerDropdown" style="display: block;">
               <option class="preselect" value="" style="display: block;">Hersteller wählen</option>
                {{ _self.cpitems0(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
            </select>

The Twig macro "cpitems0" generates elements for the

This is the jQuery Code that should, amongst other things, output a text to the console once children (<option> elements of the <select>) are clicked.

$(document).ready(function() {

console.log('CATEGORY SELECTOR TEST');

$("#herstellerDropdown").children().click(function(e) {
e.preventDefault();

console.log('CATEGORY SELECTOR TEST 2');

...

I have also tried

$(document).ready(function() {

console.log('CATEGORY SELECTOR TEST');

$("#herstellerDropdown").on('click', '> *', function(e) {
e.preventDefault();

console.log('CATEGORY SELECTOR TEST 2');

...

Only Firefox (private mode and cleared browser cache) displays the second console.log output, all the other tested Browsers (Brave, Chromium, Opera Developer in private mode with cleared Browser cache on Ubuntu 20.4) only display the first console.log output

Does anyone know why this happens?

Upate 14.10.2021 14:20 -> I have to use $("#herstellerDropdown").on("change" ... ) instead of .$("#herstellerDropdown").click because it's a element.

Generally, I have to use "AJAX Cascading Dropdowns" for what should be realized. I thought I could avoid AJAX and load the server generated content into the DOM and copy the respective elements with $("selectElement").html( elements) but I guess that results in poor performance and bad design so I have to go with the Cascading Dropdowns!

Please click [edit](https://stackoverflow.com/posts/67090359/edit) and post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. This is not a twig issue, so please post only clean HTML and JS — mplungjan, Apr 14 '21 at 10:58
You can load all sets of dropdown content in one go and not using Ajax, but you likely want Ajax — mplungjan, Apr 14 '21 at 12:29

score 0 · Accepted Answer · answered Apr 14 '21 at 11:02

0

Use on("change" instead of click
Options do not need ID
Why display:block?
Why preventDefault() ?

This works in Chrom(e/ium) and Fx

$(function() {
  $("#herstellerDropdown").on("change", function(e) {
    console.log(this.value)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="herstellerSelect" class="categoryElement" id="herstellerDropdown">
  <option class="preselect" value="" style="display: block;">Hersteller wählen</option>
  <option data-val-one="Key0" data-val-two="" data-val-three="" value="entry0">categories_info[keyZero].elementid 0</option>
  <option data-val-one="Key1" data-val-two="" data-val-three="" value="entry1">categories_info[keyZero].elementid 1</option>
  <option data-val-one="Key2" data-val-two="" data-val-three="" value="entry2">categories_info[keyZero].elementid 2</option>
</select>

answered Apr 14 '21 at 11:02

mplungjan

169,008
28
173
236

Thank you, I've changed it, I don't need display: block and the ID, initially I thought I could hide/show options but now I know I have to remove/add them which takes me to another challenge because when you click the "previous" select, the "following" – vorpXuser Apr 14 '21 at 11:43
I have three it should only display that belong to the first selected – vorpXuser Apr 14 '21 at 11:53
Please update your question instead of posting elaborations in comments. It is called a cascading drop down and you need Ajax if the server needs to fill the second and third drop down. – mplungjan Apr 14 '21 at 11:54

All Browsers except Firefox don't react to jQuery .click()

1 Answers1