Question

我有一个动态列表，它根据文本执行不同的功能。因为附加了列表元素，所以我需要使用delegate()函数，但是我不知道如何访问每个选择器的每个特定文本。

this指的是delegate()操作的对象，而不是接收事件的选择器。 li仅指第一个li元素。这是我目前的代码：

$('#rooms').delegate('li', 'click', function(){
    console.log($('li').text());
    var index = $('li').text().indexOf(":");
    location.href = "http://localhost:3000/chat/" + $('li').text().substring(0, index);
});

Answer 1

delegated已弃用on()。然后，此方法允许您使用事件处理程序中的this关键字访问引发事件的元素的实例。试试这个：

$('#rooms').on('click', 'li', function(){
    var $li = $(this);
    console.log($li.text());
    var index = $li.text().indexOf(":");
    //location.href = "http://localhost:3000/chat/" + $li.text().substring(0, index);
    var location = "http://localhost:3000/chat/" + $li.text().substring(0, index);
    alert(location);
});

$('<li />', { text: 'foo:bar' }).appendTo('#rooms');
$('<li />', { text: 'buzz:bizz' }).appendTo('#rooms');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="rooms"></ul>

Answer 2

我不确定你会得到什么，但当我这样做时，this 点击的元素。您发布的代码应该可以正常工作。

但是，无论如何，我建议switching to .on()。

＆＃13;

$('#rooms').delegate('li', 'click', function() {
  $("#output").text($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul id="rooms">
  <li>abc</li>
  <li>def</li>
  <li>ghi</li>
</ul>
<div id="output"></div>

＆＃13;

jquery .delegate（）从选择器访问文本

2 个答案: