Question

所以基本上我的click()触发器上有两个函数。

var firstFunction = function() {
    var id = $(this).attr('id');
    alert(id);
};

var secondFunction = function() {
    //something here
};

$('#trigger').click(function() {
    firstFunction();
    secondFunction();
});

在firstFunction()我正试图获取$(this).attr('id')，但它正在返回undefined。

我知道调用多个函数有两个功能，因为当我只调用一个函数时它可以工作

$('#trigger').click(firstFunction);

示例Fiddle here

Answer 1

根据您现有的方法，Window指的是bind()对象，而不是调用该事件的元素。

您可以使用.bind()

this方法创建一个新函数，在调用时，将其$('#trigger').click(function() { firstFunction.bind(this)(); secondFunction.bind(this)(); })关键字设置为提供的值，

var firstFunction = function() {
    var id = $(this).attr('id');
    console.log(id);
};

var secondFunction = function() {
    //something here
    var id = $(this).attr('id');
    console.log(id);
};

$('#trigger').click(function() {
    firstFunction.bind(this)();
    secondFunction.bind(this)();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Click Me</button>

＆＃13;

{{1}}

＆＃13;

Fiddle

Answer 2

它返回undefined，因为您没有应用与事件相同的this。您可以使用call或apply而不是直接调用它来实现此目的。

$('#trigger').click(function() {
    firstFunction.call(this);
    secondFunction.call(this);
});

Answer 3

this内的firstFunction将是窗口对象本身 - 将this传递给修复的函数 - 见下面的演示：

＆＃13;

var firstFunction = function(el) {
  var id = $(el).attr('id');
  alert(id);
};

var secondFunction = function() {
  //something here
};

$('#trigger').click(function() {
  firstFunction(this);
  secondFunction(this);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Click Me</button>

＆＃13;

另一种方法是使用Function.prototype.call将this参数绑定到函数：

＆＃13;

var firstFunction = function() {
  var id = $(this).attr('id');
  alert(id);
};

var secondFunction = function() {
  //something here
};

$('#trigger').click(function() {
  firstFunction.call(this);
  secondFunction.call(this);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Click Me</button>

＆＃13;

Answer 4

您可以传递jQuery对象元素，而不仅仅在函数中使用它：

＆＃13;

var firstFunction = function($el) {
    var id = $el.attr('id');
    console.log(id);
};

var secondFunction = function() {
    //something here
};

$('#trigger').click(function() {
    firstFunction($(this));
    secondFunction();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Button</button>

＆＃13;

Answer 5

click()处理程序将事件作为参数接收。传递它是因为this范围内firstFunction()不可用。

像这样：

var firstFunction = function(target) {
    var id = $(target).attr('id');
    alert(id);
};

var secondFunction = function() {
    //something here
};

$('#trigger').click(function(e) {
    firstFunction(e.target);
    secondFunction();
});

Answer 6

没什么大事，很简单。

如果要调用函数并进入该函数，则需要使用事件，然后在函数参数中传递引用。

我已经更新了您的小提琴中的代码并使用我的更新：

第1步：

$('#trigger').click(function(event) {
  var that = this;
  firstFunction(that);
  secondFunction(that);
});

创建了一个赋值给它并将其传递给函数参数。

请注意，在click函数中编写 event 需要将其定义为本地点击引用（非窗口）

第2步：

通过那个而不是这个，以确保引用来自点击功能而不是窗口。

var firstFunction = function(that) {
  var id = $(that).attr('id');
  alert(id);
};

Updated Fiddle

嵌套函数

6 个答案: