Для вызова AJAX требуется двойной щелчок

Question

Я создал функцию, которая загружает контент и записывает в html. По какой-то причине функция отображается после двух кликов вместо одной. Любая идея, как это сделать, чтобы загрузить и отобразить информацию одним щелчком мыши?

function getFuncDoc(funcName, targetDivId) { 
    var webServiceCall = funcName; 
    $.ajax({ 
     type: "get", 
     url: webServiceCall, 

     success: function(doc) { 
      $('#' + targetDivId).load(doc, function(){ 
      $('#' + targetDivId).toggle(         
        function() { 

         $('#' + targetDivId).css('padding', '10px'); 
         $('#' + targetDivId).html(doc); 
        }); 
      }); 
     }, 
     error: function(request, status, error) { 
      return 'Error'; 
     } 
    }); 
} 

Answer 1

Проверьте, если целевой элемент (targetDivId) имеет display:noneперед темtoggle() срабатывает.

Если это не так, то вам нужно добавить этот атрибут к вашему элементу в CSS.

toggle() -ную элемент с display:block или display:inline или display:inline-blockскроет элемент и установите его атрибут display:none, следовательно, почему вы должны вызвать его дважды содержание будет показано на рисунке.

Адрес live demo.