除 Firefox 之外的所有浏览器都不会对 jQuery .click() 做出反应

Question

我有以下HTML/Twig结构

            <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>

Twig 宏“cpitems0”为

生成元素

这是 jQuery 代码，一旦单击 children（<select> 的 <option> 元素），它应该向控制台输出文本.

$(document).ready(function() {

console.log('CATEGORY SELECTOR TEST');

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

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

...

我也试过了

$(document).ready(function() {

console.log('CATEGORY SELECTOR TEST');

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

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

...

只有 Firefox（私有模式和已清除浏览器缓存）显示第二个 console.log 输出，所有其他经过测试的浏览器（Brave、Chromium、Opera Developer 在私有模式下已清除浏览器缓存 Ubuntu 20.4) 只显示第一个console.log输出

有人知道为什么会这样吗？

Upate 14.10.2021 14:20 -> 我必须使用 $("#herstellerDropdown").on("change" ... ) 而不是 . $("#herstellerDropdown").click 因为它是一个元素。

一般情况下，要实现什么我都得用“AJAXCascading Dropdowns”。我想我可以避免 AJAX 并将服务器生成的内容加载到 DOM 并使用 $("selectElement").html( elements) 复制相应的元素，但我想这会导致糟糕的性能和糟糕的设计，所以我不得不使用级联下拉菜单！

Answer 1

使用 on("change" 而不是点击
选项不需要 ID
为什么 display:block？
为什么要防止默认（）？

这适用于 Chrom(e/ium) 和 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>

除 Firefox 之外的所有浏览器都不会对 jQuery .click() 做出反应

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

html

jquery

cross-browser