Javascript - 单击带类的 Span答案

【问题标题】：Javascript - Clicking Span with ClassJavascript - 单击带类的 Span
【发布时间】：2013-01-29 01:21:24
【问题描述】：

据我了解，这应该很简单，但在执行此操作时出现错误。我在网站上有一个按钮，按钮内具有不同的跨度，一旦单击它们，跨度就会使用 Jquery 更改。使用 Firebug，我试图查看我的 click 方法适用于第一个跨度文本，但由于某种原因，我收到以下错误。我究竟做错了什么？（注意，页面上使用的是最新的 Jquery）

HTML：

<button id="signup_forms_submit" class="chrome big on_dark signup_forms_submit touchy blue">
        <span class="account_btn">Start</span>
        <span class="birthday_btn">Next</span>
        <span class="captcha_btn"><span><b>Almost</b> <b>Done!</b></span></span>
        <span class="login_btn">Log in</span>
    </button>

jQuery 命令：

$('.account_btn').click();

Firebug 控制台日志：

TypeError: $(...) is null

$('.account_btn').click();

【问题讨论】：

是HTML之前的代码吗？你是在 dom.ready 之后运行它吗？
是的，是的。按钮代码在其他 HTML 之间，在 dom.ready 之后运行。
你能在 jsFiddle.net 上重现这个吗？
当您触发该点击时应该发生什么？
$(...) 在 jQuery 中永远不会为空。你还有其他问题。还有其他东西劫持了美元符号吗？

标签： javascript jquery firebug

【解决方案1】：

试试

$('span .account_btn').click();

【讨论】：

它正在变为空，因为单击按钮时您没有得到任何输出。我只是将它复制并粘贴到 JSFiddle 中，并且该按钮不执行任何操作。这就是为什么你得到空值。我也在谷歌浏览器中复制了它，我在你的第一行得到了一个
jQuery $ 不返回 null 所以它与选择器无关！如果选择器不返回任何内容，则它是一个长度为零的 jQuery 对象。
我不是在说 jQuery，我说的是当你点击时什么都没有。也许让点击“做某事”然后它不会为空。

【解决方案2】：

你可能有兼容性问题。

试试：

$J = jQuery.noConflict();
$J(function() {
    $J('.account_btn').click();
});

【讨论】：

【解决方案3】：

从未见过按钮内的“子按钮”。首先尝试创建单个按钮，可能跨越但不在此按钮标签内。这个html是用js生成的吗？也许你应该使用

$(document).on('click','.account_btn', function(){...});

那么。

【讨论】：

似乎 OP 正在通过隐藏跨度来更改按钮的文本。
我所做的只是从'document' 周围删除引号 - 我想我会继续为您更改它，而不是创建评论并让您做一些微不足道的事情 =P。不用担心

【解决方案4】：

在您的控制台中，输入：

jQuery

这给了你什么？因为看起来您根本没有加载 jQUery。尝试打开一个新标签（一个空标签）并将其输入控制台，看看你会得到什么:-)

$('.span').click()
TypeError: Cannot call method 'click' of null

【讨论】：

【解决方案5】：

由于您的 span 在按钮内，初始点击事件将触发按钮的点击事件，而不是 span 的特定操作。

如果您希望按钮内的每个跨度都有不同的事件，您应该将它们包含在一个 div 中，而不是一个按钮并绑定一个事件：

$(function(){  
    $('span.account_btn').click(function(e){
        e.preventDefault(); 
        // Do something
    });
});

此外，如果您编写以下内容，您会看到“account_btn”类的跨度不为空。

$(function(){
    console.log($('span.account_btn'));
});

【讨论】：