javascript - 为什么点击li后$(this).text()返回""？

Question

为什么这会在点击事件上返回一个空白字符串“”？

function saveSelection()
{
    var selectedValue = $(this).text(); // --> is ""
}

为了

<ul>
   <li data-bind="item" onclick="saveSelection();">Value1</li>
</ul>

Answer 1

将此添加为参数：

function saveSelection(element)
{
    var selectedValue = $(element).text(); // --> is "Value1"
}

为了

<ul>
   <li data-bind="item" onclick="saveSelection(this);">Value1</li>
</ul>

Answer 2

函数中的上下文取决于它是如何被调用的，你调用的方式saveSelection将this是全局对象（window）。call您可以使用该方法设置函数的上下文

<li data-bind="item" onclick="saveSelection.call(this);">Value1</li><!-- `this` is the li here. -->

Answer 3

只是我的2美分...

_{阳离子：这个深入 jQuery 的答案可能会引用其他项目在 jQuery“标记”中的使用。这并不意味着他们发明了这个系统，只是他们让它变得更好。警告：这有时可能会用“外行的术语”来拼写，以便“每个人”都可以了解他们可用的力量。}

有几种方法可以纠正这个错误，每种方法都有自己的优点和缺点。

第一个显而易见的是，正如已经建议的那样，只需将this其作为参数传递。这样做的优点是老式的内联编辑。你确切地知道每一行写在哪里。缺点很多。首先，如果您更改该函数名称，则必须在调用它的任何地方更改它，并且使用内联编辑，这可能是很多地方。此外，您失去了保持动态和能够随意进行“简单”更改的灵活性。清单不胜枚举，但长话短说，这被称为“旧”方法是有原因的。

这个怎么运作：

//  here "this" is passed as a parameter/argument to the method you're calling
<li data-bind="item" onclick="saveSelection(this);">Value1</li>
//  so in your method, simply get the parameter or argument
function saveSelection(element)

另一种方法是使用良好的旧 jQuery .click() 方法。当然，这需要知道将其应用于哪个元素。虽然你是李似乎有点模棱两可，但它确实有一个让步。“数据绑定”属性。我们可以使用该属性来获取包含该属性的所有 li，并将 click 方法分配给它们。但是，当这样做时，您的参数将成为一个 jQuery 事件对象，而不是“this”。但是，“this”仍然是隐含的，因此它仍然存在于函数中。这里的亲不用过“这个”，已经有了！缺点是，如果 li 包含 data-bind=item 在此代码运行后添加，则不会为它们分配此方法，因为它们“迟到了”。

$("li[data-bind=item]").click(saveSelection);
//  Also same as 
$("li[data-bind=item]").on("click", saveSelection);

最后，更好的解决方案。最后提到的 before 方法包含一个称为“委托”的“替代”版本。这允许您为选择器的所有元素设置一个事件，无论它们是何时创建的！这意味着，即使是包含我们选择器的后期 li 元素仍将被分配 click 方法！我能想到的唯一骗局，这似乎只在使用在调用之前必须存在的父 ID 时效果最好。父母应该是孩子的直接父母。

//  In other words it works like this
$("#parentID").on("click", ".child-class", function(e) {});

对于您的示例，如果您为 UL 分配了“bob”的 ID，那么它看起来像这样：

$("#bob").on("click", "li[data-bind=item]", saveSelection);

当然你的函数参数也会改变：

function saveSelection(event) {
    var $this = $(this); // note, this is already passed through!!!

使用 jQuery，没有“正确”的解决方案，只有机会。所以坐下来，放松一下，尝试一些事情，找到最适合您需求的方法！享受！

Answer 4

<ul>
   <li data-bind="item" onclick="saveSelection(event);">Value1</li>
</ul>

function saveSelection(e)
{  
    var selectedValue = $(e.target).text(); // --> is ""
  console.log(selectedValue);
}