jQuery .on ('click', function() funktioniert nur beim zweiten Klick

Question

Ich habe ein benutzerdefiniertes jQuery-Skript, in dem die .click(); -Funktionen funktionieren, aber die .hide(); und .show(); nur Auslöser für den zweiten Klick

HTML:.

<div id="ivpa-content" class="ivpa-register ivpa_registered" data-variations="TLDR">  
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_foetel"> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="elso-foetel"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="masodik-foetel"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="foetel-nelkul"></span> 
    </div> 
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_foetel-adag"> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="foetel-fel-adag"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="foetel-teljes-adag"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="a-foetel-nelkul"></span> 
    </div> 
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_leves"> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="elso-leves"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="masodik-leves"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="leves-nelkul"></span> 
    </div> 
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_leves-adag"> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="leves-fel-adag"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="leves-teljes-adag"></span> 
     <span class="ivpa_term ivpa_active ivpa_instock" data-term="a-leves-nelkul"></span> 
    </div> 
    <a class="ivpa_reset_variations" href="#reset">Clear selection</a> 
</div> 

jQuery:

(function ($) { 
var foetel_nelkul = $('[data-term="foetel-nelkul"]'); 
var foetel_adag = $('[data-attribute="pa_foetel-adag"]'); 
var elso_foetel = $('[data-term="elso-foetel"]'); 
var a_foetel_nelkul = $('[data-term="a-foetel-nelkul"]'); 
var foetel_fel_adag = $('[data-term="foetel-fel-adag"]'); 
var foetel_teljes_adag = $('[data-term="foetel-teljes-adag"]'); 

$(a_foetel_nelkul).hide(); 
$(foetel_adag).hide(); 

$(elso_foetel).on('click', function() { 
    $(foetel_adag).show(); 
    if ($(foetel_nelkul).hasClass('ivpa_clicked')) { 
     foetel_nelkul.click(); 
    } 
    if ($(a_foetel_nelkul).hasClass('ivpa_clicked')) { 
     a_foetel_nelkul.click(); 
    } 
}); 
$(foetel_nelkul).on('click', function() { 
    $(foetel_adag).hide(); 
    if ($(elso_foetel).hasClass('ivpa_clicked')) { 
     elso_foetel.click(); 
     if ($(foetel_fel_adag).hasClass('ivpa_clicked')) { 
      foetel_fel_adag.click(); 
     } 
     if ($(foetel_teljes_adag).hasClass('ivpa_clicked')) { 
      foetel_teljes_adag.click(); 
     } 
     if ($(a_foetel_nelkul).hasClass('ivpa_clicked')) { 
      a_foetel_nelkul.click(); 
     } 
    } 

Also, wenn ich auf das Element $ (elso_foetel) es zeigt sich, aber ich muss zweimal klicken auf dem $ (foetel_nelkul), um das $ (foetel_adag) versteckt zu machen, und umgekehrt

Vielen Dank im Voraus für alle Hilfe! Ich muss das wirklich durchstehen.

Answer 1

Vielleicht können Sie die Funktion von .on() ändern:

$(foetel_nelkul).click(function() { 
    // All of your code in the other function here 
});