0

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

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

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

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

我怎样才能解决这个问题，只显示 li 文本（没有按钮文本）？我是否必须以将按钮放置在 li 标签之外的方式来修改我的代码？

更新

在我接受其中一个答案之前——顺便说一句，所有这些答案都有效，所以谢谢你，你能否向我解释一下使用一种方法或另一种方法的优缺点是什么——即 textNode 与 span 标签。

4

6 回答 6

1

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

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

http://jsfiddle.net/cZk8H/

于 2013-07-14T16:45:53.343 回答
1

尝试添加包含在跨度中的文本。您应该稍后轻松解决兄弟的价值：

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/

优点（使用跨度）：更好地管理 li 内的文本。您实际上总是指代包含在跨度中的内容....

优点（不使用跨度）：您需要注意的 HTML 中的较小标签。尽管在这种情况下，我会说考虑它更多的是微观管理。

于 2013-07-14T16:46:33.457 回答
1

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

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

接着：

$(this).siblings("span").text()
于 2013-07-14T16:46:36.417 回答
1 
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/

于 2013-07-14T16:50:25.137 回答
0

或者，您可以这样做：

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); });
});

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

于 2013-07-14T16:51:06.743 回答
0

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

$(this).parent().clone().children().remove().end().text()
于 2013-07-14T16:51:34.860 回答