jQuery li element select by ID

Question

can anyone please help?

I have a HTML code like this.

<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>

I try to add a .click event on li having id hide_filter .

What I have done is-

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

And -

$(".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
});

And -

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

And -

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

But nothing works for me.

Thanks in advance for helping..

Answer 1

Actually It works :)

 $("#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" alt=""></a> </li> <li id="hide_filter"> <a href="#">Hide Filter</a> </li> </ul> 

Answer 2

Assuming you have added the jquery library, You need to attach the event when DOM is loaded.ie on DOM ready event:

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

Working Demo

Answer 3

Remove .selectedItems selector from your 3rd option

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

Remove index 0 from your 4th option

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

Otherwise your 4 options are correct and will work fine. Kindly make sure you have written these codes inside ready event.

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

Answer 4

Maybe your code is not eval. Try put your code in body tag with function wrap like this

 $(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> 

Answer 5

Maybe there is a problem with jquery libraries. Are they in conflict with other javascripts?