javascript - Click Actions works on second click -


this code works on first click. when repeated works on second click on same element. html

<div id="monthly-table"> <a href="#" class="monthly active">monthly</a> <a href="#" onclick="subscriptiontable(this)" class="yearly">yearly</a> <h1>monthly</h1></div><div id="yearly-table" style="display:none"> <a href="#" onclick="subscriptiontable(this)" class="monthly">monthly</a> <a href="#" class="yearly active">yearly</a> <h1>yearly</h1></div> 

script

function subscriptiontable(el) {    $(el).on('click', function() {        if ($('#yearly-table').is(':hidden')) {           $('#yearly-table').show();           $('#monthly-table').hide();         } else {          $('#yearly-table').hide();          $('#monthly-table').show();        }       return false;    }); }; 

instead of using inline click handler register jquery click handler, use jquery dom ready handler register click handler

jquery(function($) {    $('.period').on('click', function() {      var $target = $($(this).attr('href')).show();      $('.target').not($target).hide();      return false;    });  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="monthly-table" class="target">    <a href="#" class="monthly active">monthly</a>    <a href="#yearly-table" class="yearly period">yearly</a>    <h1>monthly</h1>  </div>  <div id="yearly-table" class="target" style="display:none">    <a href="#monthly-table" class="monthly period">monthly</a>    <a href="#" class="yearly active">yearly</a>    <h1>yearly</h1>  </div>


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -