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美分......

_{Cation：这个跳入jQuery的答案可能会引用其他项目在jQuery中使用“mark-up”。这并不意味着他们发明了这个系统，只是说他们做得更好。注意：这可能有时会以“外行人的术语”的形式详细说明，因此“每个人”都可以了解他们可以获得的权力。}

有几种方法可以解决这个错误，每种方法都有自己的专业和反对意见。

第一个显而易见的是，正如已经建议的那样，只需将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（）方法。当然，这需要知道应用它的元素。虽然你看起来有点模棱两可，但它确实有一个让步。 “data-bind”属性。我们可以使用此属性来获取包含该属性的所有li，并将click方法分配给它们。但是，当这样做时，您的参数变为jQuery事件对象而不是“this”。但是，“这个”仍然是隐含的，因此它仍然存在于该功能中。这里的职业选手没有必要通过“这个”，它已经存在了！ con，如果在运行此代码后添加了包含data-bind = item的li，则不会为它们分配此方法，因为它们“迟到了”。

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

最后，更好的解决方案。上次提到的before方法包含一个称为“delegate”的“备用”版本。这允许您将事件设置为选择器的所有元素，无论它们何时被创建！这意味着，即使是包含我们的选择器的后期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);
}

为什么$（this）.text（）在点击li后返回“”？

4 个答案: