Jquery onclick事件需要两次点击。

Question

点击时，我想隐藏/显示一些HTML代码（通过对另一个页面进行GET请求获得）。它能够工作，但问题是需要两次点击才能实现。有一个与之相关的问题，但我无法理解。

  <script>
     $(document).ready(function(){
        $(".quote-toggle").click( function(event) {
            var id = $(this).attr('id');
            $.get( $(this).attr('href'), function(msg) {
                if($("#toggler_" + id).html()=='show') {
                    $("#" + id).html(msg);
                    $("#toggler_" + id).html('hide'); 
                  }
                else {
                    $("#" + id).html('');
                    $("#toggler_" + id).html('show'); 
                 }
            });
            event.preventDefault();
        });
     });
   </script>

这是我第一次使用jquery/javascript。如果代码有任何解释或建议，将不胜感激。
[编辑]
jsfiddle链接：http://jsfiddle.net/KCLf5/1/

- db42

---

可以让我们看到所有的标记吗？也许创建一个jsfiddle？ - AndyL

我会把 event.preventDefault 放在代码块的第一行。 - Rodolfo

@pimvdb不确定这是否重要，这就是为什么我说“我会”...也许正常行为发生在你防止它之前或其他什么地方。没有查看HTML，只是一个猜测。 - Rodolfo

@AndyL，我已经添加了jsfiddle的链接。虽然它在jsfiddle上无法正常运行，但你仍然可以看到所有标记。 - db42

这个 JS Fiddle 在点击一次后似乎运行良好。 - Lourens

Answer 1

如果我要猜测的话，$("#toggler_" + id) 的 html 没有设置为 show。所以第一次点击会将其设置为显示，第二次点击将加载数据。

确保在页面加载时切换器具有正确的 HTML。

- Lourens

---

之前是“show”。忘记加空格了。非常感谢。 - db42

Answer 2

1. 首先，您不应该在隐藏元素上执行get请求。
2. 其次，event.preventDefault应该在事件的开头。这将使您免受javascript错误带来的意外行为的影响。

下面是使用以上两个建议的代码：

    $(document).ready(function(){
      $(".quote-toggle").click( function(event) {
        event.preventDefault();
        var id = $(this).attr('id');
        var url = $(this).attr('href');
        if($("#" + id).html()=='') {
            $.get(url, function(msg) {
                $("#" + id).html(msg);
                $("#toggler_" + id).html('hide'); 
            });
         } else {
            $("#" + id).html('');
            $("#toggler_" + id).html('show'); 
         }
      });
    });

- Nikolay Fominyh

Answer 3

我为了解决“需要两次点击才能加载第一个外部HTML”的问题而苦斗了两天。

在第一个需要两次点击才能加载的HTML文件之后，其余的文件只需要一次点击就可以正常加载。

我很容易地解决了这个问题，只需创建一个空的HTML文件，并将其加载命令放置在“(document).ready”后面的行上。我尝试了论坛上的其他方法都不起作用，但这个方法在第一次尝试时就成功了。

我注意到JS文件需要在加载任何其他文件之前加载一个HTML文件，所以我给它提供了一个自动加载的HTML文件。简单的修复，效果非常好！

- Stevie B