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

Question

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

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

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

$(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 = анонимной функции. Я пробовал почти каждую комбинацию возвращаемых типов, о которых я могу думать. Где я иду не так?

Edit:

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

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

    } 

** Edit 2: **

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

$(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 - в котором вы пытались развязать анонимную функцию, а не развязывать ее так, как вы ее связывали o вы просто увеличиваете количество слушателей в своем div, которые будут сработаны вместе.

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

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

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

 
}); 
 

 
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 напрямую, как и раньше.