JQuery click event not working on li tag

Question

I want to get the click event on the li element using jQuery. But unable to get it. FoundationJs framework is used for the frontend.

HTML code:

<div class="entry-fee margin-auto" style="padding: 10px 10px 0px 10px; background-color: white;">
    <div class="row container" style="padding: 5px;">
        <h4 style="text-align: left; font-weight: bold; font-size: 1em;">Entry Fee</h4>
        <div class="select-box">
        <ol class="select" id="coins">
            <% for(var i=0; i < data.coinOptions.length; i++) { %>
              <li class="ui-state-default <%= i == 0 ? 'ui-selected' : ''  %>" data-value="<%- data.coinOptions[i] %>"><%=  (data.coinOptions[i] == 0 ? "FREE" : data.coinOptions[i] + " Coins") %></li>
            <% } %>
        </ol>
    </div>
    </div>
</div>

The jquery code snippet below works on clicking the container but not on li tag

$(".entry-fee .container").click(function (event) {
    event.preventDefault();
    console.log(event.currentTarget);
})

None of the below work when I click on the li tags

$(".entry-fee .container .select-box").click(function (event) {
    event.preventDefault();
    console.log(event.currentTarget);
})

$(".entry-fee .container .select-box li").click(function (event) {
    event.preventDefault();
    console.log(event.currentTarget);
})

$("#coins li").click(function (event) {
    event.preventDefault();
    console.log(event.currentTarget);
})

But I noted one thing that if I fire the event manually using

$(".entry-fee .container .select-box li").click()

in chrome console it works, which means the event listeners are bound to the elements. What can be done here to make it work properly? Let me know if any more info is required.

Does `$("#coins").on("click", "li", function(event) { ... });` work? — H77, Oct 03 '17 at 14:05
Couldn't reproduce https://codepen.io/anon/pen/RLLBZv?editors=1111 — Walk, Oct 03 '17 at 14:06
Yes, the li elements are added dynamically. I didn't put that code here. @sid-m — Sagar Gopale, Oct 03 '17 at 14:06
The `.click()` code you run in the console - what happens if you add that to your doc.ready (right after you wire up the events)? In the same place, what do you get with `console.log($".entry-fee .container .select-box li").length)` ? My question is: are you loading your html dynamically *after* you've attempted to wire up the events? — freedomn-m, Oct 03 '17 at 14:06
Comment confirms they are loaded dynamically, so you need to add the events *after* the html is loaded, or use event delegation. See linked. — freedomn-m, Oct 03 '17 at 14:07
You'll want to delegate the event to a static parent. As-is, the current functionality works. — Daerik, Oct 03 '17 at 14:07
@H77 you'll need to determine how much is dynamically loaded from OP. It's likely the whole `ol` is loaded, not use the `li`s. — freedomn-m, Oct 03 '17 at 14:08
you can't add event listener to element that hasn't been created yet. Try to add event listener to a parent element which already exists and pass the child selector as context. Take this for reference http://api.jquery.com/on/#on-events-selector-data — sid-m, Oct 03 '17 at 14:10
I have edited the question for the dynamic loading li elements. — Sagar Gopale, Oct 03 '17 at 14:11

Timmetje · Answer 1 · 2017-10-03T14:15:49.840

3

This is not reproducable with the above example (probably) because the li elements are added dynamically.

You should bind the click handler to the closest parent container where you add the <li> tags in.

For example:

$('#coins-select').on('click','li', function(event){
    event.preventDefault();
    console.log(event.currentTarget);
});

edited Oct 03 '17 at 14:15

answered Oct 03 '17 at 14:10

Timmetje

7,571
16
36

Parag Jadhav · Answer 2 · 2017-10-03T14:17:43.830

Try using on in JQuery, when you want to trigger events on elements which are dynamically inserted in DOM

$(document).ready(function() {
  $(".select").on("click", "li", function() {
    console.log($(this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-fee margin-auto" style="padding: 10px 10px 0px 10px; background-color: white;">
  <div class="row container" style="padding: 5px;">
    <h4 style="text-align: left; font-weight: bold; font-size: 1em;">Entry Fee</h4>
    <div class="select-box">
      <ol class="select" id="coins" style="z-index:-1;">
        <li class="ui-state-default ui-selected" data-value="100">100 Coins</li>
        <li class="ui-state-default" data-value="200">200 Coins</li>
        <li class="ui-state-default" data-value="300">300 Coins</li>
        <li class="ui-state-default" data-value="400">400 Coins</li>
        <li class="ui-state-default" data-value="500">500 Coins</li>
      </ol>
    </div>
  </div>
</div>

Here's a FIDDLE

score 0 · Answer 3 · answered Oct 03 '17 at 14:10

**use $(document).on **

$(document).on('click', ".entry-fee .container .select-box li", function (event) {
    event.preventDefault();
    alert(event.currentTarget.innerHTML)
    console.log(event.currentTarget);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-fee margin-auto" style="padding: 10px 10px 0px 10px; background-color: white;">
    <div class="row container" style="padding: 5px;">
        <h4 style="text-align: left; font-weight: bold; font-size: 1em;">Entry Fee</h4>
        <div class="select-box">
        <ol class="select" id="coins" style="z-index:-1;">
            <li class="ui-state-default ui-selected" data-value="100">100 Coins</li>
            <li class="ui-state-default" data-value="200">200 Coins</li>
            <li class="ui-state-default" data-value="300">300 Coins</li>
            <li class="ui-state-default" data-value="400">400 Coins</li>
            <li class="ui-state-default" data-value="500">500 Coins</li>
        </ol>
    </div>
    </div>
</div>

JQuery click event not working on li tag

3 Answers3