Jquery click eventObject 在 Firefox 中不起作用答案

【问题标题】：Jquery click eventObject does not work in FirefoxJquery click eventObject 在 Firefox 中不起作用
【发布时间】：2013-07-24 03:12:31
【问题描述】：

我正在尝试从单击的元素中获取文本。 javascript/jquery 适用于 IE 和 chrome 但不适用于 Firefox。

HTML

<span class="spanclass">Click Me</span>
<br/>
<span id="displayDel"></span>

Javascript

$(document).ready(function () {
    $('.spanclass').click( function(cl) {
        onSelect(cl.delegateTarget);
    });
});

function onSelect(cldel)
{
    $('#displayDel').text("You "+cldel.innerText);
}

这是 JSFiddle 中的一个运行示例http://jsfiddle.net/FdXNg/

在 IE 和 Chrome 中，当您点击“点击我”时，它会显示“您点击我”。

在 Firefox 中，当您点击“点击我”时，它会显示 You undefined

我怎样才能在 IE、Chrome 和 FireFox 中进行这项工作？

【问题讨论】：

为什么不使用属性 innerHTML 或 Firefox 支持的任何其他方法？ FF 中的 innerText 等价于 textContent，但使用跨浏览器解决方案。在谷歌中检查会在不到 15 秒内给你一个回答...
@roasted 我上面给出的示例是我实际代码的简化版本。真正的代码在我不想要的跨度中有 html。 objectEvent 在 FF 和 Chrome 中是不同的，因此我认为这是问题所在。我在谷歌上搜索“Jquery click EventObject firefox”

标签： jquery internet-explorer firefox onclick cross-browser

【解决方案1】：

为什么要使用外部函数？这将做同样的事情（使用 jQuery 的 .text() 函数）：

$(document).ready(function () {
    $('.spanclass').click( function() {
       $('#displayDel').text("You "+$(this).text());
    });
});

演示：http://jsfiddle.net/FdXNg/1/

如果要在点击后隐藏元素，在代码第三条规则后添加：

       $(this).hide(); //or `remove()`

编辑（评论后）

$(document).ready(function () {
    $('.spanclass').click(function() {
        onSelect($(this));
    });
});

function onSelect(cldel) {
    $('#displayDel').text("You "+cldel.text());
}

【讨论】：

我给出的例子被简化了。真正的 onSelect 是从其他函数调用的，但这有效。谢谢

【解决方案2】：

试试$('#displayDel').text("You "+$(cldel).html());这更像是jquery方式。 ;)

【讨论】：

如果你想使用 jquery，text() 方法在这里会更合适，就像在 Pieter 的回答中一样
我给出的示例是我的实际代码的简化版本。跨度中实际上有我不想要的 html。谢谢你的回答。
@Nick 所以使用$(cldel).text()
确实如此。如果跨度内没有标签，则没有区别。但是你永远不知道什么时候你可能会改变主意并放置一些标签。好点。