Событие 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/

Answer 1

Если бы мне пришлось угадывать, html $("#toggler_" + id) не установлен на show. Таким образом, первый щелчок установит его на отображение, а второй загрузит данные.

Убедитесь, что у переключателя правильный HTML при загрузке страницы

Answer 2

1. Во-первых, вы не должны получать запрос на скрытый элемент.
2. Во-вторых - event.preventDefault должен быть в начале события.Это избавит вас от непредвиденного поведения при ошибках JavaScript.

Вот код, который использует эти 2 рекомендации:

    $(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

В течение двух дней я боролся с проблемой «2-клик-требуется-загрузить-первый-внешний-html».

После одной загрузки, требующей 2 кликов, остальные будут вести себя и загружаться одним кликом.

Я легко решил эту проблему, создав пустой HTML-файл и поместив его команду загрузки в строку, следующую за "(document) .ready". Ничто другое, что я пробовал на форумах, не сработало бы для меня, но это сработало с первой попытки.

Я заметил, что JS-файл требует загрузки одного html-файла, прежде чем загружать другие, поэтому я дал ему один для автоматической загрузки. Простое исправление и работает как шарм!