Javascript onclick 需要两次点击答案

【问题标题】：Javascript onclick requiring two clicksJavascript onclick 需要两次点击
【发布时间】：2014-04-25 17:06:43
【问题描述】：

我有这个框，点击时会变成一个更大的框（获取类）。但它需要点击 2 次，而不是预期的一次。

.clientes {width:170px;height:27px;background-image:url('../imagens/clients.gif');-webkit-transition:1s;}
.clientes-clicked {width:356px !important;height:154px !important;background-image:url('../imagens/clients-big.png') !important;-webkit-transition:1s;}

<script>    
    var clientesclick = function(){
    $('.clientes').on('click', function(e) {
      $('.clientes').toggleClass("clientes-clicked"); //you can list several class names 
      e.preventDefault();
    });
    }
</script>

【问题讨论】：

你为什么不使用 $(document).ready()？另外，为什么要将函数存储在变量中而不是仅仅使用事件处理程序？这两个可能是原因，如果不是，我们可能需要更多信息，例如您在页面中运行的其他脚本。

标签： javascript onclick

【解决方案1】：

你让这变得比它需要的更复杂。你可以这样做：

$('.clientes').click(function(){
    $(this).toggleClass('clientes-clicked');
});

小提琴：http://jsfiddle.net/64XQ3/

而且，正如上面所指出的，你的 jQuery 应该包含在

$(document).ready(function(){
    // code here
});

【讨论】：

你是对的，它不能在你的网站上运行，但这不是因为代码本身。语法是正确的。这可能与其他脚本相互干扰有关。我会尝试逐个删除脚本并每次都重新尝试您的 toggleClass() 方法。

【解决方案2】：

这样试试

<script>   
    $(document).ready(function() {
        $('.clientes').on('click', function(e) {
          $('.clientes').toggleClass("clientes-clicked"); //you can list several class names 
          e.preventDefault();
        });
    });
</script>

不太清楚为什么要将它分配给变量，但它不会立即运行，而是会在您调用该方法时执行（我猜这是第一次单击），然后您的 dom 元素将具有事件（第二次点击）。

使用 $(document).ready 它将在所有 dom 准备好后运行，然后当您第一次单击元素时，它们应该已经有事件

【讨论】：

我在 document.ready 上试过，但它看起来不工作：finecolor.com.br/novo
这实际上是因为您的 .clientes 没有准备好文档，它仅在您单击菜单时出现。您应该在菜单单击事件之后（出现弹出框之后）执行代码。这有意义吗？
它确实可以，因为它现在可以工作了。谢谢楼主！