jQuery li元素按ID选择

时间:2015-02-02 12:58:19

标签: javascript jquery html jquery-plugins jquery-selectors

有人可以帮忙吗?

我有这样的HTML代码。

<ul class="nav navbar-nav navbar-left">
                    <li>
                        <a href="#"><img src="img/topbararrowback.png" alt=""></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');
});

但是没有什么对我有用。

提前感谢您的帮助..

5 个答案:

答案 0 :(得分:2)

实际上它有效:)

&#13;
&#13;
$("#hide_filter").click(function()
{
alert('message');
});
&#13;
<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" alt=""></a>
                    </li>
                    <li id="hide_filter">
                        <a href="#">Hide Filter</a>
                    </li>
                </ul>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

假设您已添加了jquery库,则需要在加载DOM时附加事件。关于DOM ready事件:

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

Working Demo

答案 2 :(得分:0)

从第3个选项中删除.selectedItems选择器

$('ul li#hide_filter').click(function()
{
    //$("p").hide();
    alert('message');
});

从第4个选项中删除索引0

$('#hide_filter').click(function()
{
    //$("p").hide();
    alert('message');
});

否则你的4个选项都是正确的,并且可以正常工作。请确保您已在准备好的活动中写下这些代码。

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

答案 3 :(得分:0)

也许你的代码不是eval。 尝试将代码放在body标签中,并使用此功能包装

&#13;
&#13;
$(function(){      //document ready function
 $("#hide_filter").on("click",function(){
    console.log('message');
 });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

也许jquery库存在问题。他们是否与其他javascripts冲突?