Эта функция щелчка выполняется даже с правильными обратными вызовами

Question

Я не могу понять, почему эти функции выполняются. Я понимаю, правильный синтаксис для привязки функции заключается в следующем.

$('#idOfThing').bind('click', foofunc);
function foofunc() { ///do things }

Тем не менее, что-то происходит с моим кодом. Либо одна из этих привязок работает, либо другие не работают. Я перепробовал каждую комбинацию, которую только смог придумать

$(window).on("load", function () {
         $('#divContactSticky').addClass("bottomDiv");
         $('#divContactSticky').bind('click', FillScreen);

         });

        var FillScreen = function() {
            $('#divContactSticky').unbind("click", FillScreen);
            $('#divContactSticky').css('height', '90vh');
        };

        function CancelForm() {
                $('#divContactSticky').css('height', '77px');
                $('#divContactSticky').bind('click', function () {
                    FillScreen();
                });
        }

Смысл в том, чтобы div был прикреплен к нижней части окна. Когда пользователь нажимает на этот div. ViewPort будет заполнен div. Внутри этого div находится кнопка Отмена. Это html и CancelForm() будет выполняться по клику. Очевидно, что после нажатия кнопки div я должен отменить привязку функции или FillScreen будет выполняться при каждом нажатии ввода формы и т. д.

Я пытался сделать CancelForm() bind функционировать так же, как load тип обратного вызова. Я перепробовал все. я сделал FillScreen = анонимной функции. Я попробовал почти каждую комбинацию типов возвращаемых данных, которые я могу придумать. Куда я иду не так?

Редактировать:

CancelForm получил макияж, и проблема не устранена. CancelForm, как показано ниже, выполняет FillScreen немедленно.

function CancelForm() {
            $('#divContactSticky').css('height', '77px');
            $('#divContactSticky').bind('click', FillScreen);

    }

** Редактировать 2: **

У @Radicate был частично правильный ответ. Существует большая разница между связыванием и вкл / выкл. Код ниже - это то, что, наконец, сработало.

$(document).ready(function () {
    $('.cancelb').click(function () {
        CancelForm();
    });
    $('#divContactSticky').click(FillScreen);
}
$(window).on("load", function () {
         $('#divContactSticky').addClass("bottomDiv");
         $('#divContactSticky').on('click', FillScreen);

         });

        var FillScreen = function() {
            $('#divContactSticky').off("click", FillScreen);
            $('#divContactSticky').css('height', '90vh');
        };

        function CancelForm() {
                $('#divContactSticky').css('height', '77px');
                $('#divContactSticky').on('click', FillScreen);
                    event.stopPropagation()
                });
        }

Answer 1

То, что вы испытываете, это распространение событий, так как кнопка отмены находится внутри div.

События DOM имеют два этапа: захват и распространение - в большинстве случаев мы имеем дело (в основном по умолчанию) с этапом распространения, на котором событие перемещается вверх по дереву DOM.

Таким образом, в основном мы отменим событие, когда оно сработает на кнопке отмены, до того, как оно сработает на div, что снова увеличит наш div до 90vh.

В jQuery мы сделаем это с event.stopPropagation()

Прочитайте об этом здесь: https://api.jquery.com/event.stoppropagation/

И если вы хотите узнать больше о том, как проходят события, я рекомендую вам прочитать это: https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm

Еще одна вещь, которая была неправильной в вашем коде, как упоминалось @SLaks, это использование unbind - в котором вы пытались отменить привязку анонимной функции вместо того, чтобы отвязывать ее так, как вы ее связали, - так что вы просто увеличиваете количество слушателей на вашем div, которые все сработают вместе.

В любом случае, использование unbind здесь не нужно, так как мы хотим, чтобы слушатели обоих элементов просто отменяли событие, когда это необходимо.

Хватит говорить, вот рабочий пример:

$(window).on("load", function() {
  $('#divContactSticky').addClass("bottomDiv");
  $('#divContactSticky').bind('click', FillScreen);
  $("button.cancel").click(function(){
  CancelForm();
  event.stopPropagation();
 });

});

var FillScreen = function() {
  $('#divContactSticky').css('height', '90vh');
};

function CancelForm() {
  $('#divContactSticky').css('height', '77px');
}

.bottomDiv {
  color:red;
}
#divContactSticky{
  border:1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContactSticky">
  divContactSticky
  <button class="cancel">
  Cancel
  </button>
</div>

Answer 2

Ваш второй bind() звонок не проходит FillScreen; он передает анонимную функцию, которая вызывает FillScreen,

Вы никогда не отменяете это.

Вместо этого вы должны связать FillScreen напрямую, как вы делаете ранее.