取消将初始单击功能绑定到另一个按钮上的单击

Question

I have a form which is initially hidden. There is two steps of click flow to reach the form. I need to reset the initial click action when the form close button is clicked.

Adding the sample code and demo.

Here goes the flow

• Click on the Join Now text
• Then click on the text Click here to open the form text
• Then click on the close icon
• There comes the pop up

What I now need to know is,

1. By clicking on Yes , the form needs to be reset and the screen should look like how it looked initially (Brand name box with join now text) and the initial click action of join now should be refreshed.

2. By clicking on No , it should remain on the same form.

     $(".button").click(function(e){ e.preventDefault(); $(this).hide(); $(".slidethis").fadeIn(800).css("display","inline-block"); $(".wrapper").css("display","block"); }); $(".seconddiv").hide(); //forstdiv click $(".firstdiv").click(function(){ $(this).hide(); $(".seconddiv").show(); }); //Close button $(".close_icon").click(function(){ $(".popup").show(); }); 

Demo Here

PS: I don't want to refresh the page by closing the form.

Answer 1

Adding this code should do it. It's about reversing your steps:

$("input[value=Yes]").click(function(){
    //reset - reverse all the steps
    $(".button").show();
    $(".slidethis").fadeOut(800).css("display","none");
    $(".wrapper").css("display","inline-block");
    $(".popup").hide();
    $(".seconddiv").hide();
    $(".firstdiv").show();
});


$("input[value=No]").click(function(){
   $(".popup").hide();

}); 

Updated fiddle: https://jsfiddle.net/5353ntuf/5/

Answer 2

Working fiddle .

You should add an event click on the both buttons Yes and No , so give them a common class , eg confirm class:

<input type="button" class='confirm' value="Yes" />
<input type="button" class='confirm' value="No" />

Then add a condition to check which action you're going to perform, like :

//Confirm buttons
$("body").on("click", ".confirm", function() {
  $(".popup").hide();

  if ($(this).val() == 'No') 
  {
    $('form input').val(""); //Reset form
  } else {
    $(".seconddiv,.slidethis").hide();
    $(".firstdiv,.button").show();
    $(".wrapper").css("display", "inline-block");
  }
});

Hope this helps.

 //slide open the main panel $(".button").click(function(e) { e.preventDefault(); $(this).hide(); $(".slidethis").fadeIn(800).css("display", "inline-block"); $(".wrapper").css("display", "block"); }); $(".seconddiv").hide(); //forstdiv click $(".firstdiv").click(function() { $(this).hide(); $(".seconddiv").show(); }); //Close button $(".close_icon").click(function() { $(".popup").show(); }); //Confirm buttons $("body").on("click", ".confirm", function() { $(".popup").hide(); if ($(this).val() == 'No') { $('form input').val(""); } else { $(".seconddiv,.slidethis").hide(); $(".firstdiv,.button").show(); $(".wrapper").css("display", "inline-block"); } }); 

 .wrapper { background: #9ac366; display: inline-block; } .headcard { display: inline-block; text-align: center; padding: 3% 30px; float: left; } .slidethis { background: #b67fd8; padding: 20px 0; width: 70%; vertical-align: top; position: relative; height: 228px; display: none; position: relative } .firstdiv, .seconddiv { width: 200px; border: #888 solid 2px; padding: 20px; } .close_icon { background: #333; color: #fff; padding: 4px; float: right; margin-top: -20px; text-decoration: none } .popup { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: #e4e4e4; text-align: center; padding-top: 5%; display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="headcard"> <h4>Brand Name</h4> <a href="#" class="button">Join Now </a> </div> <!--this is hidden by default--> <div class="slidethis"> <div class="firstdiv"> Click here to open the form </div> <div class="seconddiv"> <form> <a href="#" class="close_icon">X</a> <input placeholder="name" /> <input placeholder="email" /> </form> <!--close pop up--> <div class="popup"> Closing will clear the form data. Do you want ot close? <br/> <input type="button" class='confirm' value="Yes" /> <input type="button" class='confirm' value="No" /> </div> </div> </div> </div>