Question 10703 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jquery second click no works when add class and remove class

jQuery(document).ready(function() 
{

if(jQuery("#init").hasClass("show_box"))
{
jQuery("#init").click(function() {
jQuery("#box").show(1000);
jQuery("#init").removeClass("show_box");
jQuery("#init").addClass("hide_box");
});
}
}); 



jQuery(document).ready(function() 
{
if(jQuery("#init").hasClass("hide_box"))
{
alert("ok");
jQuery("#box").hide(1000);
}
});

<div id="box" style="position:relative;width:100px;height:100px;background-color:red;display:none";></div>
<span id="init" class="show_box"> Box Action </span>

As you can see the jquery script show div with id box when click over Box Action, also add class and remove class, show_box and hide_box, in this moment in the second step when change class and try click for activate second script part and hide box, no works, in this case i try without click for automatic hide when change class for hide box but continue don´t works.

I see inside DOM and show_class change, and i try all kind of things and don´t works in the second step for hide box when click in Box Action

Tags:

2

Answers


  1. 0

    1. Ideally skip to use multiple jQuery(document).ready(function() events.

    2. Also jQuery("#init").click this should change with new way style of click events. That will works with every elements that created dynamically as well.

    3. In jQuery you can take advantage of toggle & toggleClass

    jQuery(document).ready(function () {
    jQuery(document).on('click', '#init', function (event) {
        jQuery("#box").toggle(1000);
        jQuery(this).toggleClass('show_box');
        jQuery(this).toggleClass('hide_box');
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box" style="position:relative;width:100px;height:100px;background-color:red;display:none" ;></div>
<span id="init" class="show_box"> Box Action </span>
    Login or Signup to reply.
  2. 0

    try this answer.

    don’t write on click event 2 times for the same div. just write one on click event and on to this function check with if else condition. and add or remove your class.

    Also, you can write the same code using toggleClass

    jQuery(document).ready(function() {
  jQuery("#init").click(function() {
    if (jQuery("#init").hasClass("show_box")) {
      jQuery("#box").show(1000);
      jQuery("#init").removeClass("show_box");
      jQuery("#init").addClass("hide_box");
    } else if (jQuery("#init").hasClass("hide_box")) {
      alert("ok");
      jQuery("#box").hide(1000);
      jQuery("#init").addClass("show_box");
      jQuery("#init").removeClass("hide_box");
    }
  });
});
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="box" style="position:relative;width:100px;height:100px;background-color:red;display:none;">Test</div>
<span id="init" class="show_box"> Box Action </span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search