javascript - 单击某个元素后调用jQuery函数

Question

这是HTML代码

<p onclick='javascript:func(this);'>Bla bla bla</p>

这是脚本（它写在文档的开头）。

function func(e) {
  var t = e.text();
  console.log(t);
}

它不起作用，我不明白为什么。错误消息是“对象 # 没有方法‘文本’”。

Answer 1

将其包装在 jQuery 包装器中。.text()是一个 jQuery 方法，你的元素e是一个普通的 Javascript DOM 元素，所以你需要 jQuery 包装器。

var t = $(e).text();

旁注：不显眼的事件处理程序分配优于内联处理程序。例如：

$(document).ready(function(){
    $('p').click(function(){
        var t = $(this).text();
        console.log(t);
    });
});

上面使用 jQuery 来分配点击处理程序（而不是内联 Javascript），因此，可以访问this普通 Javascript 对象或$(this)jQuery 对象的元素。

Answer 2

小提琴

这是普通的javascript，会做你要求的。

function func(e) {
  var t = e.innerHTML;
  console.log(t);
}

Answer 3

尝试使用innerHTML：

function func(e) {
    var t= e.innerHTML;
    console.log(t);
}

Answer 4

innerText如果您不使用 jquery，请使用。

function func(e) {
  var t = e.innerText;
  console.log(t);
}

Answer 5

正确的方法是：

HTML：

<p onclick='func(this);'>Bla bla bla</p>

代替

<p onclick='javascript:func(this);'>Bla bla bla</p>

Javascript：

function func(e) {
    var t = e.innerHTML;
    console.log(t);
}

Answer 6

Jquery 被设计成不显眼的。如果您在任何地方添加 onclick 属性，那么您做错了。

相反，您应该添加事件侦听器

<p>Blah Blah Blah</p>

jQuery/脚本

$(document).ready(function(){
    $('p').on('click', function(){
        console.log($(this).text());
    });
});