2

我有一个更新 html 并创建一些链接的 ajax 函数（不确定是否相关）：

<a href="#" class="clickme" onclick="column_click()" title="my title">click me</a>

我不知道为什么，但是 onclick，如果我提醒$(this).attr('title')它显示为undefined，如果我提醒$(this)它显示[window]

     function column_click(){
            value = $(this);
            console.log(value);

            thetitle= $(this).attr('title');
            console.log(thetitle);
        }

有谁知道为什么会这样？

4

5 回答 5

3

这应该可以解决问题。

onclick="column_click.call(this);"

原因是您的“点击处理程序”实际上只是一个函数。默认是this引用window对象。

在我上面的例子中，我们说“执行column_click并确保this引用a元素。

于 2012-11-14T05:13:27.993 回答
2

您混淆了 JS/jQuery 事件处理的突兀和不突兀的风格。onclick在不显眼的风格中，您在 JavaScript 本身而不是在属性中设置点击处理程序：

$('.clickme').on('click', column_click);

在处理事件时，上面将自动绑定this到单击的元素。

然而，这不是标准的 JavaScript！这是 jQuery 的一个特性。该on方法足够聪明，可以在处理事件时将函数绑定到 HTML 元素。onclick="column_click"不这样做，因为它不是 jQuery。它使用标准的 JS 行为，即默认绑定this到全局对象window。

顺便说一句，你看到的原因[window]是它$(this)已经包装window在一个 jQuery 对象中，所以它看起来像一个包含对象的数组window。

有三种主要方法可以解决您的问题：

  1. 使用不显眼的绑定：$('.clickme').on('click', column_click);在页面末尾的脚本中，或在$(document).ready处理程序中的某处
  2. this手动绑定：onclick="column_click.call(this)"

  3. 完全避免使用this：

    function column_click(e) {
    var value = $(e.target);
    //...

其中，为了良好的编码，我强烈推荐 1 或 3。

于 2012-11-14T05:28:54.487 回答
2

*的简短概述this

在 JavaScript 中执行函数时，默认this值为window.

function foo() {
    console.log(this);
}

foo(); // => window

this可以通过多种方式更改该值。一种方法是将函数作为对象的方法调用：

var x = {
    foo: function() {
        console.log(this);
    }
};
x.foo(); // => This time it's the x object.

另一种方法是使用call或apply告诉函数在某个对象的上下文中执行。

function foo() {
    console.log(this);
}
foo.call(x); // => x object again
foo.apply(x); // => x object as well

如果你call或apply在null或undefined，默认行为将再次发生：该函数将在上下文中执行window：

function foo() {
    console.log(this);
}
foo.call(null); // => window
foo.apply(undefined); // => window

但是，请注意，在 ECMAScript 5严格模式下，this不默认为窗口：

(function() {

    'use strict';

    function foo() {
        console.log(this);
    }

    foo(); // => undefined
    foo.call(null); // => null
    foo.apply(undefined); // => undefined

})();

您还可以在调用函数之前将其设置为this将bind函数绑定到对象：

function foo() {
    console.log(this);
}

var bar = {
    baz: 'some property'
};

var foobar = foo.bind(bar);

foobar(); // => calls foo with bar as this

结论

您正在使用此代码：

<a href="#" class="clickme" onclick="column_click()" title="my title">click me</a>

这意味着当点击链接时，它会执行column_click();. 这意味着该column_click函数将作为普通函数而不是方法执行，因为 (1) 它不是作为对象 ( someobject.column_click();) 的属性调用的，(2) 它不是用callor调用的apply，(3) 它不是用 调用的bind。由于它不是在严格模式下运行，因此默认this为window.

如何解决您的问题

因此，要解决您的问题，您可以简单地使用call(或apply) 来告诉函数在元素的上下文中执行。内小代码里面的属性值，this指的是元素。所以我们可以使用column_click.call(this). 就这么容易！

<a href="#" class="clickme" onclick="column_click.call(this);" title="my title">click me</a>

但是，将元素作为参数传递可能更有意义：

<a href="#" class="clickme" onclick="column_click(this);" title="my title">click me</a>

并更改您的函数以接受参数：

function column_click(el) {
    // Use el instead of this...
}

* 获得技术

this在 JavaScript 中是动态作用域的。此行为不同于所有其他词法范围的变量。其他变量没有不同的绑定，具体取决于函数的调用方式；它们的范围来自它们在脚本中出现的位置。this但是行为不同，并且可以具有不同的绑定，这取决于它在脚本中出现的位置，而取决于它的调用方式。这对于学习该语言的人来说可能是一个困惑的根源，但要成为一名熟练的 JavaScript 开发人员，掌握它是必要的。

于 2012-11-14T05:13:56.707 回答
2

您需要在函数中传递参数column_click，

<a href="#" class="clickme" onclick="column_click(this)" title="my title">click me</a>



function column_click(obj){
        value = $(obj);
        console.log(value);
    }

注意：this参考window对象。所以不会像你期望的那样工作。

于 2012-11-14T05:14:48.083 回答
0

你在使用 jQuery 对吗？为什么不：

$(".clickme").click(function() {
  value = $(this);
  console.log(value);

  thetitle= $(this).attr('title');
  console.log(thetitle);
});

// or

$(".clickme").click(column_click);
于 2012-11-14T05:16:13.183 回答