Question

我有以下代码：

layoutOverlaysBldg = $("#layout-overlays-bldg")
layoutOverlaysBldg.on("click", "div", function(event) {
  var floor;
  console.log("floornum: " + this.dataset.floornum);
  floor = parseInt(this.dataset.floornum);
  ...
  $("#choose-floor").fadeOut();
  $("#choose-apt").fadeIn();
});

以后 - 基于我从数据库回来的数据 - 我想从一些div中删除一些.on("click", "div", ...)。我已经有了获得正确div的选择器，但我无法弄清楚如何删除click事件。我选择正确的div之后尝试了.off("click")，但它没有效果。

Answer 1

此问题是因为您使用的是委托事件。您可以为所有子元素添加或删除事件，但不能为div选择器添加或删除单个元素。

考虑到这一点，最简单的方法是根据类添加事件，然后根据需要在子项上添加和删除该类。像这样：

layoutOverlaysBldg = $("#layout-overlays-bldg")
layoutOverlaysBldg.on("click", "div.clickable", function(event) {
    // your code...
});

然后，您可以通过添加或删除.clickable类来启用/禁用子div上的事件。

Answer 2

您可以尝试这样：

示例：

     <div id="test">
        <div id="first">first</div>
        <div id="second">second</div>
     </div>

     <div onclick="unbindSecondDiv();">UNBIND</div>

    <script>
            function unbindSecondDiv()
            {
                test = $("#second")
                test.unbind("click");

                alert('Selected Area Click is Unbind');

            }

            $(document).ready(function(){
                    //BIND SELECTED DIV CLICK EVENT
                    test = $("#test > div")
                    test.bind("click" , function(event) {
                        alert($(this).attr('id'));
                    });
            });


    </script>

在上面的例子中，选中的DIV元素click事件是bind。

执行函数unbindSecondDiv（）之后，第二个DIV点击事件将解除绑定。

试一试，可以帮到你。

附加到儿童时删除onclick

2 个答案: