Question

我已经使用jQuery为我动态添加的列表元素添加了一个.on（）函数。我面临的问题是触发点击的按钮位于动态添加的li元素内部，因此

$(this).parent().text()

返回li元素的文本以及按钮的文本。

请参阅以下小提琴：http://jsfiddle.net/TL5TR/

如何解决此问题并仅显示li文本（没有按钮文本）？我是否必须以将按钮放在li标签之外的方式重新编写代码？

更新

在我接受其中一个答案之前 - 所有这些答案都在顺便说一下，谢谢你，你能否向我解释一下使用一种方法或另一种方法的优点/缺点 - 即textNode vs span标签

Answer 1

如果textNode是单击按钮的上一个兄弟，则可以使用previousSibling属性。

$("#list").on('click', 'button', function() {
    alert(this.previousSibling.nodeValue);
});

http://jsfiddle.net/cZk8H/

Answer 2

尝试添加包含在范围中的文字。你应该稍后轻松解决兄弟姐妹的价值：

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
          $('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");
        });


$("#list").on('click', 'button', function() {
      alert($(this).siblings().text());
    });

http://jsfiddle.net/TL5TR/1/

PROS（使用范围）：更好地管理li内的文本。实际上你总是引用跨度中包含的内容......

PROS（不使用span）： HTML中需要注意的较小标记。虽然在这种情况下我会说它更像是一个微观管理层来考虑它。

Answer 3

我认为最简单的解决方案是在文字周围添加span：

$('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");

然后：

$(this).siblings("span").text()

Answer 4

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
          $('#list').append("<li><span>" + item + "</span> <button class='clickme'>Click me</button></li>");
        });


$("#list").on('click', 'button', function() {
      alert($(this).parent().find("span").text());
    });

将文字放在span标记

中

http://jsfiddle.net/TL5TR/2/

Answer 5

或者不是把它分开，你可以这样做：

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
    $("<li>" + item + " <button class='clickme'>Click me</button></li>")
       .appendTo('#list')
       .on('click', function() { alert(item); });
});

除非您正在以其他方式添加这些内容。然后我会使用其他建议的答案之一。

Answer 6

您可以克隆元素并删除子元素：

$(this).parent().clone().children().remove().end().text()

jQuery只返回<li>元素文本</li>

6 个答案: