click function for li is not working in jQuery

Question

In my HTML I have ol and li this is my HTML and I have script for those links, like when I click on it i kept a alert to check it its not working

$('#namesId ol li').click(function() {
  alert('clicked');
  //ToDo
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
  <ol style="padding-left: 10px;">
    <li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a></li>
  </ol>
</div>

click function id not working what is the problem with it.

2 possible reasons, 1 your not having an element with the id `namesId` or you have not included jquery correctly — Carsten Løvbo Andersen, Sep 13 '17 at 06:49
@Rajesh I think the problem is that the OP has not included jquery — Carsten Løvbo Andersen, Sep 13 '17 at 06:53
i included both properly , if do same action for other elements its working — bharath varma, Sep 13 '17 at 06:54
@CarstenLøvboAndersen My guess is, OP is having `a` tag in `li` and he must have redirection on `a`. So before the event is bubbled, redirection happens — Rajesh, Sep 13 '17 at 06:55
@bharathvarma Can you add `target=''_blank` in `a` tag and check again? — Rajesh, Sep 13 '17 at 06:57
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Rajesh, Sep 13 '17 at 07:04

Mehravish Temkar · Answer 1 · 2018-02-04T10:14:30.967

5

Try this:

$('#namesId ol').on('click', 'li', function(e){
  e.preventDefault();
  alert('clicked');
});

edited Feb 04 '18 at 10:14

answered Sep 13 '17 at 07:04

Mehravish Temkar

4,275
3
25
44

No need to traverse all the way from document – Alive to die - Anant Sep 13 '17 at 07:06
yes. BTW i have already up-voted you because at-least concept is correct – Alive to die - Anant Sep 13 '17 at 07:48

Alive to die - Anant · Accepted Answer · 2017-09-13T07:04:42.320

As you said li are generated dynamically, You have to use jQuery event-delegation

So do like below:-

$('#namesId ol').on('click',"li",function(e) {
  e.preventDefault();
  console.log('clicked');
  //ToDo
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
  <ol style="padding-left: 10px;">
    <li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a></li>
    <li class="v"><a href="">Wildlife</a></li>
  </ol>
</div>

score 0 · Answer 3 · answered Sep 13 '17 at 06:50

0

it should be:

$('#namesId ol li:nth-child(1)').click(function() {
        alert('clicked');
      //ToDo
});         //for first li click 

$('#namesId ol li:nth-child(2)').click(function() {
        alert('clicked');
      //ToDo
});         //for second li click

answered Sep 13 '17 at 06:50

Balchandar Reddy

112
12

There is no reason to use `:nth-child(1` – Carsten Løvbo Andersen Sep 13 '17 at 06:51
You should always leave an explanation to your answer. – Carsten Løvbo Andersen Sep 13 '17 at 07:05

Anup pandey · Answer 4 · 2017-09-13T07:05:35.707

Below Code working fine.

    <html>
        <head>
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        </head>
        <body>
        <ol id="namesId" style="padding-left: 10px;">
                <li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a>
               </li>
              <li class="v"><a href="">Wildlife</a></li>
        </ol>
        <script>
        $('#namesId li').click(function() {
                alert('clicked');
              //ToDo
        });

        </script>
        </body>
  </html>

<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
        <li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a>
       </li>
      <li class="v"><a href="">Wildlife</a></li>
</ol>
<script>
$('#namesId li').click(function() {
        alert('clicked');
      //ToDo
});

</script>
</body>
</html>

Also please notice `<>` icon in editor. You can put your *HTML/JS/CSS* code and make it running snippet. — Rajesh, Sep 13 '17 at 06:58
User the above code as it only change the src(jquery file location ) part it will be work fine. — Anup pandey, Sep 13 '17 at 07:01

score 0 · Answer 5 · answered Sep 13 '17 at 07:25

You have indicated a name for the selector #namesId, but it's not defined anywhere.

Put it this way and it will work:

 <div id="namesId">
   <ol style="padding-left: 10px;">
    <li class="v"><a href="">Funny 10 second video! - YouTube (360p)</a>
   </li>
  <li class="v"><a href="">Wildlife</a></li>
 </ol>
</div>

click function for li is not working in jQuery

5 Answers5