单击Jquery在一个页面上工作，在另一个页面上不工作

Question

下拉单击在一个页面上工作，而不是在另一个页面上工作，即使它与这些页面加载的组件和相同的javaScript文件相同。

这是组件

 <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Please Select A Fabric Range</a>
            <ul class="dropdown-menu">
                {% for fabricRange in fabricRanges %}
                <li>
                    <a class="nav-link dropdown-item" id="tab-{{ fabricRange.id }}" data-bs-toggle="tab" data-bs-target="#tabpane{{fabricRange.id}}" type="button" role="tab" aria-controls="tabpane-{{fabricRange.id}}" aria-selected="true">{{fabricRange.title}}</a>
                </li>
                {% endfor %}
            </ul>
        </li>

和JS

 $(".dropdown-menu").on("click", "a.nav-link.dropdown-item", function() {
    console.log("clicked")
    $(this).parents(".nav-item.dropdown").find("a.dropdown-toggle").html($(this).html())
})

我在三页、两页、一页中使用过它。console.log()在这两页上也很好，但在第三页没有响应。请帮帮忙

Answer 1

1. 首先需要验证下拉菜单类是否存在。如果它存在，那么您需要检查它是否有导航链接下拉项目类。为此，您需要检查该元素的HTML。为此，请遵循下面的代码。

$(.ready)(函数(){ var计数= 0；if ($(“.下拉菜单”).length> 0){ $(“.下拉菜单”).each(函数(索引，项){ count = count + 1；if(count !== 0) {console.log($( item) .html()；console.log(item.innerHTML)；})；}//警报(“计数->”+计数)；console.log(count);})

1. 在验证之后，如果上面第1点中提到的所有内容都没有工作，那么您必须验证JQUERY是否被正确地加载到与其他2页相同的层次结构中。