jQuery点击事件不起作用li标签

Question

我想使用jQuery在li元素上获得点击事件。但无法得到它。Foundationjs框架用于前端。

html代码：

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

下面的jQuery代码段用于单击容器，而不是在Li Tag上

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

当我单击LI标签

时，以下所有工作都没有

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

，但我注意到一件事是，如果我使用

手动解雇活动

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

在Chrome Console中起作用，这意味着事件听众与元素绑定。在这里可以做什么以使其正常工作？让我知道是否需要更多信息。

Answer 1

这在上述示例（可能）不可再现（可能），因为li元素是动态添加的。

您应该将点击处理程序绑定到最接近的父容器，然后在其中添加<li>标签。

例如：

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

Answer 2

尝试在jquery中使用 on，当您想在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>

这是小提琴

Answer 3

**使用$（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>