javascript - 单击链接中的更改文本不起作用？

Question

我想在链接上实现的目标是单击文本更改为第二个跨度；然而，这是行不通的。

脚本

var reload = false;
$('#change').click(function() {
    reload = !reload;
    $('#change').click(function() {
    $('span',this).toggle();
    });
});

HTML

<li role="presentation" class="pull-right">
<a href="#" id="change">
<span>text 1</span><span style="display:none">text 2</span>
</a>
</li>

Answer 1

你已经用一个标志和嵌套的事件处理程序将它复杂化了，只需删除它就可以了

$('#change').click(function() {
    $('span', this).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li role="presentation" class="pull-right">
        <a href="#" id="change">
            <span>text 1</span><span style="display:none">text 2</span>
        </a>
    </li>
</ul>

当您将事件处理程序彼此嵌套时，您会在每次点击时不断绑定(bind)新的事件处理程序，并且它们会不断相互抵消，并且不会按预期工作。
这就是为什么您通常不应嵌套事件处理程序。