jquery $(this).attr('href') returns 未定义

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)) returns "window" 和 console.dir($(this)) returns "e.fn.init[1]"

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

我想我已经尝试了一切。

Answer 1

试试这个：

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

或者

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

Answer 2

当您调用 showForm(e) 时，上下文 (this) 不是 showForm 中的锚点对象，它是 window 对象。

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

$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>

或使用 .call()

将自定义上下文传递给 showForm 函数

$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 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) 会将当前元素的引用提供给 function.so 通过 'this' 应该修复你未定义的 this

Answer 5

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

});

jquery $(this).attr('href') returns 未定义

jquery $(this).attr('href') returns undefined

javascript

jquery

href

undefined

attr