jQuery li 元素按 ID 选择

Posted 2023-05-09

【中文标题】jQuery li 元素按 ID 选择

【英文标题】：jQuery li element select by ID

【发布时间】：2015-04-01 10:21:32

【问题描述】：

有人可以帮忙吗？

我有一个这样的 html 代码。

<ul class="nav navbar-nav navbar-left">
                    <li>
                        <a href="#"><img src="img/topbararrowback.png" ></a>
                    </li>
                    <li id="hide_filter">
                        <a href="#">Hide Filter</a>
                    </li>
                </ul>

我尝试在 ID 为 hide_filter 的 li 上添加一个 .click 事件。

我所做的是-

$("#hide_filter").click(function()

    alert('message');
);

还有-

$(".navbar-left li").click(function() 
    alert(this.id); // id of clicked li by directly accessing DOMElement property
    alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
    alert($(this).html()); // gets innerHTML of clicked li
    alert($(this).text()); // gets text contents of clicked li
);

还有-

    $('ul.selectedItems li#hide_filter').click(function()

    //$("p").hide();
    alert('message');
);

还有-

$('#hide_filter')[0].click(function()

    //$("p").hide();
    alert('message');
);

但对我没有任何作用。

提前感谢您的帮助..

【问题讨论】：

当脚本执行时，dom中是否存在上述元素？

如果添加了 jquery 并且在附加事件时 DOM 准备就绪，您的第一个点击处理程序应该可以工作。

所有方法，除了最后一个，都是正确的。首先是首选。在目标li 内的a 元素上是否有事件处理程序？也许a 上有处理程序，event.stopPropagination 方法调用？

您是否包含jquery.js 并将您的代码放入DOMReady 处理程序中？ $(function() /* code here */ );

【参考方案1】：

实际上它有效:)

$("#hide_filter").click(function()

alert('message');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-left">
                    <li>
                        <a href="#"><img src="img/topbararrowback.png" ></a>
                    </li>
                    <li id="hide_filter">
                        <a href="#">Hide Filter</a>
                    </li>
                </ul>

【讨论】：

我正在使用 Bootsrtap 3。这有问题吗？

【参考方案2】：

假设您已经添加了 jquery 库，您需要在加载 DOM 时附加事件。即关于 DOM 就绪事件：

$(function()//document ready function
 $("#hide_filter").click(function()
    alert('message');
 );
);

Working Demo

【参考方案3】：

也许您的代码不是 eval。 尝试将您的代码放在带有这样的函数包装的 body 标记中

$(function()      //document ready function
 $("#hide_filter").on("click",function()
    console.log('message');
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

【参考方案4】：

从您的第三个选项中删除 .selectedItems 选择器

$('ul li#hide_filter').click(function()

    //$("p").hide();
    alert('message');
);

从您的第四个选项中删除索引 0

$('#hide_filter').click(function()

    //$("p").hide();
    alert('message');
);

否则，您的 4 个选项是正确的并且可以正常工作。请确保您已在 ready 事件中编写了这些代码。

$(document).ready(function()
    $("#hide_filter").click(function()
    
        alert('message');
    );
);

【参考方案5】：

也许 jquery 库有问题。它们是否与其他 javascript 冲突？