Question

我试图在点击项目时获取无序列表中列表项的文本值。

我已经添加了一个事件监听器，并且在我继续前进之前将结果记录到控制台。

当我按班级选择时，我只收到一个订单项，但是您点击的链接并不重要，它显示了相同的链接文字。我尝试过使用.eq()，this和其他一些方法，但无论哪种方式，我要么返回所有4个元素，要么没有元素

HTML：

<div id="mapSelections"> 
<ul>
    <li>Jump to State : </li>
    <li id="Conn" ><a href="#">Connecticut</a> |</li>
    <li id="Maine"><a href="#">Maine</a> |</li>
    <li id="Mass"><a href="#">Massachusetts</a> |</li>
    <li id="Rh"><a href="#">Rhode Island</a> |</li>
    <li id="Home"><a href="#">Home</a></li>
</ul>

以下是听众：

var link = document.getElementById('mapSelections');
link.addEventListener('click', function () {
   var text = $("li:eq()", this).text();
   console.log(text);
});

Answer 1

简

您要做的是event delegation。您希望收听来自父<div>的事件，了解从子<a>标记中冒出的事件。

您可以使用jQuery's .on()功能

委派活动

var link = document.getElementById('mapSelections');
$(link).on('click', 'a', function () {


    var text = $(this).text();
    //console.log(text);
    alert(text);
});

Here is updated fiddle.

说明

基本上有两种选择可供选择：

多个听众

$("#mapSelections a").on('click', function () {
    var text = $(this).text();
    alert(text);
});

这很好但你将事件监听器绑定到几个元素（每个<a>标签的一个监听器）。每个人都有一些开销，因此它不是您可以使用的最高性能选项。

事件代表团

$("#mapSelections").on('click', 'a', function () {
    var text = $(this).text();
    alert(text);
});

原因（IMO）这是最好的，因为您正在为应用程序保存一些资源。您只绑定了一个父级$("#mapSelections")的侦听器，然后该元素正在等待仅从子级<a>标记冒出的事件。

Answer 2

喜欢这个？ http://jsfiddle.net/q8nzR/1/

我刚刚编辑了几行jQuery：

$('#mapSelections a').on('click', function () {


    var text = $(this).text();
    console.log(text);
    //alert(text);
});

你的问题是，这不是针对单个a，而是整个div＃mapSelections。

Answer 3

您应该将处理程序绑定到LI，而不是整个DIV。

$("#mapSelections li").click(function() {
    var text = $(this).find("a").text();
    console.log(text);
});

Jquery获取无序列表行项目的文本

3 个答案:

简

说明

多个听众

事件代表团