Question

我正在处理事件并使用绑定技术，如下所示

$(".floor").bind('click.index',
{page:'floor.php',get:'floor='+$(this).attr('name')},loadContent);

所以我在这里做的是这个，我试图将一个click事件附加到类.floor，然后在函数loadContent中，我根据e.data.page和e.data发出一个ajax请求。得到变量。

但是当我实际执行它时，网址如下 floor.php？地板=未定义

请帮助我摆脱这个问题

Answer 1

将数据传递给处理函数时，应注意$(this)不引用该上下文中的jQuery对象。换句话说，$(this)引用jQuery包含的window对象（或基于上下文的jQuery对象以外的任何其他对象）。因此，您应该在回调函数中使用$(this)。

$(".floor").bind('click.index', {page:'floor.php'}, function(e){
   var name = $(this).attr('name');
});

Answer 2

问题是$(this)正在执行当函数绑定时，而不是在调用处理程序（loadContent）时执行。当它被绑定时，this最有可能引用窗口对象。您无法在绑定时访问事件目标。

我可能会将您的代码重组为不传递自定义事件数据，而是将loadContent函数修改为类似

function loadContent(e) {
    var $target = $(e.target),
        data;
    if($target.hasClass('floor')) {
        data = {page: ...};
    } else {
        data = ...;
    }
    ... ajax shenanigans 
}

Answer 3

使用this时要小心，请始终考虑它所引用的内容。

$(".floor").bind(
    'click.index',
    {
         page: 'floor.php',
         get: 'floor=' + $(this).attr('name')
    },
    loadContent
);

在此代码段中，this不会引用您认为它将引用的内容（.floor jQuery对象）。现在无法分辨出它所指的内容，取决于您在此代码段周围的代码。您可以阅读this，例如on Quirksmode。

您必须注意在事件处理程序中分配name 的值，其中this指的是.floor。

function loadContent (e) { ... var getFull = e.data.get + $(this).attr('name') ... }

要实现此功能，您只需更改传递get的方式：

{ page: 'floor.php', get: 'floor=' },

jsFiddle Demo

无法在jquery中获得$（this）.attr（'name'）

3 个答案: