Блог

Я работаю над своим самым первым сайтом, и у меня проблема с событием щелчка.

вот мой веб-сайт (он не завершен): https://pawcio93.github.io/PortfolioSinglePage

Проблема в том, что #cancel не работает (функция запускается после щелчка, я проверил это с помощью alert, но событие щелчка вообще не отменяется. Я также пытаюсь использовать метод .on .off, но с тем же результатом. Если это делает что-то неправильно или я не могу использовать эти методы, чтобы отменить эту функцию «щелчка» должным образом? Если нет, то как я должен это выполнить? Заранее благодарю за ответ, я постараюсь разобраться в этом сам, ожидая ваших предложений

 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 Iamp;#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);
});
  

A click — это событие. Это происходит через миллисекунды (довольно мгновенно) после щелчка пользователя.

Вы не можете «отменить» это.

Для этого события вы можете зарегистрировать функцию для выполнения. Теперь, чтобы «отменить» изменения, внесенные такой функцией, вы должны сохранить предыдущие соответствующие состояния / значения. И используя другое click событие, вы можете создать впечатление отмены.

Вот действительно простой пример, который изменяет только <h1> текст.

 // 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() используется для отмены регистрации функции из события в элементе. Это что-то другое…

Подробнее о событиях.