Question

给出动态构建的列表，例如：

<ul id="shortcuts">
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <!-- possibly many others lis -->
</ul>

因此，为了只使用一个click事件监听器，我试图将click事件附加到列表中并获取最初传播事件的列表项索引。到目前为止，我的任何尝试都取得了成功。

我可以从中得到一些东西：

$("#shorcuts").click ( function(evt) {
   alert( evt.target );
});

但我无法找到列表中的“li”html元素及其“索引”。知道我做错了吗？

Answer 1

您需要将事件附加到li，如下所示

$(function(){
  $('#shortcuts').on('click','li',function(){
    alert($(this).index());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="shortcuts">
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <!-- possibly many others lis -->
</ul>

此处点击事件将委托给li内的所有shortcuts，您可以使用li

获取点击.index()的索引

Answer 2

您可以使用JQuery - index函数获取索引。

$('selector').click(function (event) {
    alert($(this).index());
});

DEMO

或

$("#shorcuts").on("click","li", function(evt) { alert($(this).index()); }

请点击此处查看更多选项SO - Source

event-binding-on-dynamically-created-elements

bind-click-event-on-dynamically-created-elements

Answer 3

＆＃13;

$(document).ready(function(){
  $(document).on('click','#shortcuts li',function(e){
    e.preventDefault();
    alert($(this).text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="shortcuts">
  <li><input type="checkbox" value="false"/><button>foo1</button><button>-</button></li>
  <li><input type="checkbox" value="false"/><button>foo2</button><button>-</button></li>
  <!-- possibly many others lis -->
</ul>

＆＃13;

使用按钮组成的自定义列表检测列表项索引

3 个答案: