Question

点击后，我想隐藏/显示一些HTML代码（通过GET请求获取到另一个页面）。它可以工作，但问题是它需要两次点击而不是一次。

还有一个question看似相关，但我无法理解。

  <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/

Answer 1

如果我不得不猜测，$("#toggler_" + id)的html未设置为show。因此，第一次单击将设置为显示，第二次将加载数据。

确保页面加载时切换器具有正确的html

Answer 2

首先 - 你不应该在hide元素上获取请求。
第二 - 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'); 
         }
      });
    });

Answer 3

在两天的时间里，我一直在努力完成＆＃34; 2次点击所需要加载的第一次外部HTML＆＃34;问题

一个人加载后，需要点击2次，其余部分会表现并加载1次点击。

我通过创建一个空白的html文件并将其load命令放在＆＃34;（document）.ready＆＃34;之后的行上轻松解决了这个问题。我在论坛上尝试的其他任何东西都不适用于我，但这是第一次尝试。

我注意到JS文件在加载任何其他文件之前需要加载一个html文件，所以我给它一个自动加载。简单的修复，就像一个魅力！

Jquery onclick事件需要两次点击

3 个答案: