单击某个元素后调用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对象访问该元素，或者为jQuery访问$(this)对象

Answer 2

Fiddle

这是普通的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

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

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());
    });
});