除 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 代码，除其他事项外，一旦子级（<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 上清除浏览器缓存）只显示第一个控制台。日志输出

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

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

一般来说，我必须使用“AJAX 级联下拉菜单”来实现应该实现的功能。我以为我可以避免 AJAX 并将服务器生成的内容加载到 DOM 中并使用 $("selectElement").html(elements) 复制相应的元素，但我想这会导致性能不佳和设计不佳，所以我必须使用级联下拉菜单！

Answer 1

1. 使用 on("change" 而不是 click
2. 选项不需要 ID
3. 为什么要显示：阻止？
4. 为什么要使用 preventDefault() ？

这适用于 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>