动态生成的下拉菜单选项不起作用

问题描述

所以我刚刚用javascript编写了一个下拉菜单，其中选项由javascript代码生成。而且这种选择不能正常工作。

我的代码：

HTML：

            <div class="container">
                <div id="createtasksite" class="selected-create">
                    Chose Site
                </div>
                <div class="select-box">
                    <div class="options-container-create">

                        <div class="option-create">
                            <input type="radio" class="radio" id="shopify" name="category">
                            <label for="shopify">Shopify</label>
                        </div>

                        <div class="option-create">
                            <input type="radio" class="radio" id="supreme" name="category">
                            <label for="supreme">Supreme</label>
                        </div>

                    </div>
                </div>
            </div>

Javascript：

const selectedCreateProfile = document.querySelector(".selected-create-profile")
const optionsContainerCreateProfile = document.querySelector(".options-container-create-profile")

const optionsListCreateProfile = document.querySelectorAll(".option-create-profile")

selectedCreateProfile.addEventListener("click",() => {
  optionsContainerCreateProfile.classList.toggle("active")
})

optionsListCreateProfile.forEach(o  => {
  o.addEventListener("click",() => {
    selectedCreateProfile.innerHTML = o.querySelector("label").innerHTML
    optionsContainerCreateProfile.classList.remove("active")
  })
})

此元素通常由Javascript代码添加：

<div class="option-create">
    <input type="radio" class="radio" id="shopify" name="category">
    <label for="shopify">Shopify</label>
</div>

因此，问题现在是，如果我将上述HTML元素添加（单击按钮）到下拉菜单中，则无法选择添加的选项，因为此代码无法访问DOM（我现在所了解的）：

const selectedCreateProfile = document.querySelector(".selected-create-profile")
const optionsContainerCreateProfile = document.querySelector(".options-container-create-profile")

const optionsListCreateProfile = document.querySelectorAll(".option-create-profile")

selectedCreateProfile.addEventListener("click",() => {
    selectedCreateProfile.innerHTML = o.querySelector("label").innerHTML
    optionsContainerCreateProfile.classList.remove("active")
  })
})

所以我发现我需要使用带有.on("click)的JQuery而不是querySelector，所以这就是我到目前为止所得到的：

JQuery：

const selectedCreateProfile = $(".selected-create-profile")
const optionsContainerCreateProfile = $(".options-container-create-profile")

const optionsListCreateProfile = $(".option-create-profile")

selectedCreateProfile.on("click",function() {
  optionsContainerCreateProfile.toggleClass("active")
})

optionsListCreateProfile.each(function() {
  $(this).on("click",function() {
    selectedCreateProfile.html = $(this).find("label").html()
    optionsContainerCreateProfile.first().removeClass("active")
  })
})

但是此代码首先翻译得很不好，因此无法正常工作，因此使用此新的JQuery代码，我仍然无法单击新生成的下拉菜单选项。

因此，如果有人知道如何正确地将querySelector代码转换为JQuery，并且也许可以向我解释这里的问题，那将是很棒的事，对我有很大帮助！ >

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）