Question

在我的应用程序中，我有日历图标，所以当点击它时，日历弹出显示。

所以，当我点击与<Div>类匹配的css的任何地方时，我有以下jQuery代码隐藏了该部分。

<script>
$(document).ready(function(){
    $(".myContent").click(function () {
        $(".calendar").hide();
    });
});
</script>

但是，我面临的问题是它第一次正常工作

即。单击日历图标显示日历弹出窗口...而不是单击Div隐藏日历弹出窗口内的任何位置。

但是，当我点击日历图标时，除非我刷新整个页面，否则它不会显示日历弹出窗口。

我猜我需要取消绑定点击事件但不确定如何... 有什么帮助吗？

Answer 1

使用event.stopPropagation保持点击日历图标不会冒泡到.myContent：

$("#calendar_icon").click(function(e) {
    e.stopPropagation();
    $(".calendar").show();
});

Answer 2

取消绑定你可以使用off：

$(".myContent").off('click');

请参阅： jQuery Documentation了解更多详情。

Answer 3

你可以使用off。

var handler = function(){ /* whatever */ };
$(selector).on('click', handler);
$(selector).off('click', handler);

或者，如果你只想让它最多发生一次......

$(selector).one('click', function(){ /* whatever */});

Answer 4

尝试：

<script>
$(document).ready(function(){
    $('body').on('click', '.myContent', function() {
        $(".calendar").hide();
    });
});
</script>

Answer 5

不确定你的角度，但试试这个：

$(document).ready(function(){
     $(document).on("click", ".myContent, function () {
           $(".calendar").hide();
     });

     $("#CalendarSettings").on("click", function()  {
           $(".calendar").show();
     });
  });

jQuery - 如何破坏/解除绑定点击事件

5 个答案: