Question

我有一个非常简单的代码

HTML

<a class="qqPopupCTA" href="http://example.com">Button</a>

JS

$qqPopupCTA = $('.qqPopupCTA');

function showForm(e){

    e.preventDefault();

    var targetPageUrl = $(this).attr('href');

    // do stuff
}

$qqPopupCTA.on('click', function(e){showForm(e);});

然而，我一直得到未定义的href。 Console.log（$（this））返回“window”，console.dir（$（this））返回“e.fn.init [1]”

知道我做错了什么吗？代码非常简单，所以我必须遗漏一些明显的东西。

我想我已经尝试了一切。

Answer 1

当您致电showForm(e)时，上下文（this）不是showForm内的锚点对象，它是窗口对象。

因此您可以将函数引用作为单击处理程序

传递

$qqPopupCTA.on('click', showForm);

$qqPopupCTA = $('.qqPopupCTA');

function showForm(e) {
  e.preventDefault();
  var targetPageUrl = $(this).attr('href');
  alert(targetPageUrl)

  // do stuff
}

$qqPopupCTA.on('click', showForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="qqPopupCTA" href="http://example.com">Button</a>

使用showForm

将自定义上下文传递给.call()函数

$qqPopupCTA.on('click', function (e) {
    showForm.call(this, e);
});

$qqPopupCTA = $('.qqPopupCTA');

function showForm(e) {
  e.preventDefault();
  var targetPageUrl = $(this).attr('href');
  alert(targetPageUrl)

  // do stuff
}

$qqPopupCTA.on('click', function(e) {
  showForm.call(this, e)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="qqPopupCTA" href="http://example.com">Button</a>

Answer 2

试试这个：

$qqPopupCTA.on('click', showForm); // pass function name(ref)

或者

$qqPopupCTA.on('click', function(e){
      showForm.call(this,e);
});

Answer 3

根据您的方法，函数this中的setCurrent未引用调用该事件的元素。它是window对象

只需将函数引用传递给绑定事件

$qqPopupCTA.on('click', showForm);

或者，您可以使用bind()

$qqPopupCTA.on('click', function (e) {
    showForm.bind(this)(e);
});

Answer 4

showForm函数是全局定义的，'this'是指window对象。 showForm（e，this）将为函数提供当前元素的引用。传递'this'应该修复你未定义的这个

Answer 5

$（'。qqPopupCTA'）。on（'click'，function showForm（）{ var targetPageUrl = $（this）.attr（'href'）; 警报（targetPageUrl）

}）;

jquery $（this）.attr（'href'）返回undefined

5 个答案: