CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paweł Magdański
Paweł Magdański

Reputation: 229

Click event undo

I'm working on my very first site and have a problem with click event.

here is my website (it's unfinished): https://pawcio93.github.io/PortfolioSinglePage/

The problem is that #cancel does not work (function run after click, I checked it with alert, but click event does not undo itself at all. I also try to use .on .off method but with same result. If it's making something wrong or I can't use those methods to undo this 'click' function properly? If not, how should I perform that? Thank in advance for reply I will try to figure it out myself, waiting for Yours propositions

var chooseHobby = function() {
  $(this).addClass('hobbyOnClick').removeClass('hobby firstInLine hobbyImg');
  $('.hobbyImg').hide();
  $('.hobby').css('display', 'none');
  updateHeight2();
  var id = this.id;

  if (id == 'sport') {
    if (document.getElementById("gym")) {
      return;
    } else {
      $('#sport').append('<img id="runmaggedon" src="img/runmaggedon.jpg" alt="runmaggedon" />');
      $('#sport').append('<img id="gym" src="img/gym.jpg" alt="gym" />');
      $('#sport').append('<div class="sportText">\n\
            <p>Runmaggedon is my hobby for over a year, it is challenging, hard and the people and athmosphere there is just great. For now my best distance is 24 km in mountain terrain, but it was not my last word! </p>\n\
            \n\
            </div>');
      $('#sport').append('<div class="sportText"><p>Working out is something that I&#39m doing since studies. It is became the part of my daily routine, I love to work with my body and see physical ad power progress. Gym also help with self-discipline and well-being </p></div>');
      $('#sport').append('<div id="cancel"><p>CANCEL</p></div>');
    }
  } else if (id == 'travel') {
    alert("travel");
  } else if (id == 'objectivism') {
    alert("objectivism");
  } else if (id == 'engineering') {
    alert("engineering");
  } else if (id == 'programming') {
    alert("programming");
  } else if (id == 'economy') {
    alert("economy");
  }

  $("#cancel").bind("click", function() {
    alert("function start");
    $(".hobby").unbind("click", chooseHobby);
  });
};

$(document).ready(function() {
  $(".hobby").bind('click', chooseHobby);
});

Upvotes: 1

Views: 316

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

A click is an event. It happens milliseconds (quite instantly) after a user click.

You can't "undo" it.

To that event, you can register a function to execute. Now to "undo" the changes made by such a function, you have to store the previous relevant states/values. And using another click event, you can give the impression of an undo.

Here is a really simple example which only changes a <h1> text.

// Store initial text.
var previousH1state = $("h1").text();

// Modify
$("#modify").on("click",function(){
  $("h1").text("I'm modified!");
});

// Undo
$("#undo").on("click",function(){
  $("h1").text(previousH1state);  // Notice the stored text is used here.
});

// De-register functions tied to click events from the modify/Undo buttons.
$("#off").on("click",function(){
  $("#modify, #undo").off("click");
  console.log("Modify and Undo buttons are not working anymore");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>I'm unchanged.</h1>

<button id="modify">Modify the header above</button>
<button id="undo">Undo the modification</button><br>
<br>
<button id="off">Use .off()</button>

.off() is used to de-register a function from the event on an element. That is something else...

More on events.

Upvotes: 1

Related Questions