CODEWITHSUNDEEP
jquery
AmirRezaM75
AmirRezaM75

Reputation: 1140

addClass() bug in JQuery

I think it's a simple question because i'm not pro at Jquery
go to the link

<div class="container">

  <!--  Step1Content-->
  <div class="Step1Content">
    <h1>Step1</h1>
    <p>Please Enter Your ID</p>

  </div>

  <!--  Step2Content-->
  <div class="Step2Content">
    <p>Step2</p>
    <h5>Thanks</h5>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Last Name">
    <input type="text" placeholder="Email">
  </div>

  <!--  Step3Content-->
  <div class="Step3Content">
    <p>Step3</p>
    <h5>Thanks</h5>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Last Name">
    <input type="text" placeholder="Email">
  </div>

  <!--  Step4Content-->
  <div class="Step4Content animated slideInRight">
    <p>Step4</p>
    <h3>End Of The Line</h3>
  </div>

  <!--  Buttons-->
  <button class="btn btn-default Step1Btn" style="float:left"> Step One </button>
  <button class="btn btn-default Step2Btn" style="float:right"> Step 2 &raquo; </button>
</div>

CSS: It's not important

body {
  background-color: black;
}

h1,
p {
  color: deepskyblue;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.Step1Content,
.Step2Content,
.Step3Content,
.Step4Content {
  width: 50%;
  margin-bottom: 30px;
  margin: 20px auto;
}

JS:

$(document).ready(function() {
  $(".Step1Content").show();
  $(".Step2Content").hide();
  $(".Step3Content").hide();
  $(".Step4Content").hide();
  $(".Step1Btn").hide();
  $(".Step2Btn").show();

  $(".Step1Btn").click(function() {
    $(".Step2Content").hide();
    $(".Step1Content").show();
    $(".Step1Btn").hide();
    $(".Step3Btn").html("Step 2 &raquo;");
    $(".Step3Btn").addClass("Step2Btn");
    $(".Step3Btn").removeClass("Step3Btn");
  })

  $(".Step2Btn").click(function() {
    $(".Step2Content").show();
    $(".Step1Content").hide();
    $(".Step1Btn").show();
    $(".Step1Btn").html("&laquo; Step 1");
    $(".Step2Btn").html("Step 3 &raquo;");
    $(".Step2Btn").addClass("Step3Btn");
    $(".Step2Btn").removeClass("Step2Btn");
  })

  $(".Step3Btn").click(function() {
    $(".Step2Content").hide();
    $(".Step3Content").show();
    $(".Step3Btn").html("Step 4 &raquo;");
    $(".Step1Btn").html("&laquo; Step 2");
    $(".Step3Btn").addClass("Step4Btn");
    $(".Step3Btn").removeClass("Step3Btn");
  })
})

and find out why when user click on Step 3 Button nothing won't happen.
I wanna that when user click on Step 3 Button with class of Step3Btn, Step2Content disappear and Step3Content show
I even tried alert() and understood the function on Step3Btn doesn't work at all,even though it has this class when I use inspect element

Upvotes: 1

Views: 251

Answers (2)

Pradeep Charan
Pradeep Charan

Reputation: 683

Your click function will only attach the handler to elements that already exist. .You are adding Step3Btn class dynamically. So You need to change the code

If your jQuery < 1.7

  $('.Step3Btn').live( 'click', function() {
      //your code
    })

else

 $('.container').on('click','.Step3Btn',function() {
  //your code
 })

Upvotes: 1

Cesar Bielich
Cesar Bielich

Reputation: 4945

The problem is that your Step3Btn button is dynamic, you need to do it this way

$('.container').on('click','.Step3Btn',function() {
    $(".Step2Content").hide();
    $(".Step3Content").show();
    $(".Step3Btn").html("Step 4 &raquo;");
    $(".Step1Btn").html("&laquo; Step 2");
    $(".Step3Btn").addClass("Step4Btn");
    $(".Step3Btn").removeClass("Step3Btn");
})

To be safe I would apply that to all your button functions

Upvotes: 2

Related Questions