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

Your second bind() call isn't passing FillScreen; it's passing an anonymous function that happens to call FillScreen.

You never unbind that.

Instead, you should bind FillScreen directly, like you do earlier.

Answer 2

您遇到的是事件传播，因为取消按钮位于div内。

DOM事件有两个阶段，即捕获和传播 - 我们在大多数情况下处理的事情（因为它主要是默认设置）是传播阶段，其中事件传播 up < / strong> DOM树。

基本上我们所做的就是取消事件，当它在取消按钮上触发时，之前它会在div上触发，这将再次将我们的div调整为90vh。 / p>
在jQuery中，我们将使用event.stopPropagation()
执行此操作
在这里阅读： https://api.jquery.com/event.stoppropagation/

如果您想了解更多关于事件通过的方式，我建议您阅读： https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm

@SLaks提到的另一个错误的代码就是unbind的使用 - 你尝试取消绑定匿名函数而不是绑定它的方式 - 所以你＆＃ 39; d只是递增你的div上的所有触发器的数量。

无论如何，在这里使用unbind是不必要的，因为我们想要两个元素上的监听器，我们只需要在需要时取消该事件。

足够的谈话，这是一个有效的例子：

＆＃13;
＆＃13;
$(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'); }
＆＃13;
.bottomDiv { color:red; } #divContactSticky{ border:1px solid blue; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

即使使用适当的回调，此单击功能也在执行

2 个答案: