Я не могу вводить текст в свою форму, которая находится внутри jQuery UI-аккордеона

Question

Как и в названии, у меня есть форма с одним входом и кнопкой внутри содержимого div в jQuery UI Accordion, и я не могу напечатать текст в это, когда я проверю это. Я также не могу нажать кнопку.

Вот HTML:

<button type="button" id="ic-open-report"><i class="fa fa-envelope"></i><p>Export Savings Report</p></buttOn> 
        <div id="ic-savings-report"> 
         <h4>Export a PDF Savings Report</h4> 
          <div> 
          <form method="POST" class="savings-report"> 

             <input style="user-select: text;" type="email" id="ic-email" placeholder="Email"> 
             <button type="submit" >Export</button> 
          </form> 
          </div> 
        </div> 

Вот JQuery:

$('#ic-savings-report').accordion({ 
    collapsible: true, 
    active: false, 
    animate: 400 
}); 
$('#ic-savings-report').hide(); 

$('#ic-open-report').click(function(){ 
    $('#ic-savings-report').toggle(700); 
    setTimeout("$('#ic-savings-report').accordion('option', 'active', 0  );", 1000); 
}); 

Я даже не знаю, почему это случилось бы. Почему я не могу редактировать вход?

Вот ссылка на реальном проекте: http://lcstuff.000webhostapp.com/intellifrost-calculator/

Answer 1

Я пришел через эту проблему и jquery ui устанавливал font-size: 1em на этот элемент .ui-widget input, и по какой-то причине это сделало текст невидимым. Поэтому у меня создалось впечатление, что я не мог ввести какой-либо текст, поскольку текст не показывался при вводе.

Я просто установить его на следующее исправить:

font-size: 14px; 

Answer 2

Кажется работать нормально до тех пор, как вы ссылаетесь JQuery и JQuery UI правильно:

$('#ic-savings-report').accordion({ 
 
    collapsible: true, 
 
    active: false, 
 
    animate: 400 
 
}); 
 
$('#ic-savings-report').hide(); 
 

 
$('#ic-open-report').click(function() { 
 
    $('#ic-savings-report').toggle(700); 
 
    setTimeout("$('#ic-savings-report').accordion('option', 'active', 0  );", 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<button type="button" id="ic-open-report"> 
 
    <i class="fa fa-envelope"></i> 
 
    <p>Export Savings Report</p> 
 
</button> 
 
<div id="ic-savings-report"> 
 
    <h4>Export a PDF Savings Report</h4> 
 
    <div> 
 
     <form method="POST" class="savings-report"> 
 
    
 
      <input style="user-select: text;" type="email" id="ic-email" placeholder="Email"> 
 
      <button type="submit">Export</button> 
 
     </form> 
 
    </div> 
 
</div>