Question

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

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>

下面的jquery代码片段用于单击容器，但不适用于li标签

$(".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控制台中它可以工作，这意味着事件监听器绑定到元素。在这里可以做些什么来使其正常工作？如果需要更多信息，请告诉我。

Answer 1

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

您应该将点击处理程序绑定到您添加<li>标记的最近的父容器。

例如：

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

Answer 2

如果要在动态插入DOM中的元素上触发事件，请尝试在JQuery中使用on

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

这是 FIDDLE

Answer 3

**使用$（文件）.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点击事件不适用于li标签

3 个答案: