javascript - 。。这是Jquery 的一个bug 吗?
PHP中文网
PHP中文网 2017-04-10 16:04:53
0
3
362
<!--这是主要代码-->
<a class="my-item">
    <span> Click me A </span>

    <button type="button" class="btn-delete"> Delete !!
    </button>
</a>


<script>
    $(document).ready(function () {

        $(document).on('click', ".my-item", function () {
            alert("Hello A! ");
        });

        $(document).on('click', ".btn-delete", function () {
            alert("^~^ You have click Delete! ");
        });

    });
</script>

<!-- End 主要代码-->

点击 删除的 时候 , 还会触发另一个 a 的 click 事件 - -

PHP中文网
PHP中文网

认证高级PHP讲师

Antworte allen(3)
巴扎黑
$(document).on('click', ".btn-delete", function (event) {
            alert("^~^ You have click Delete! ");
            event.stopPropagation();
        });

典型的冒泡

左手右手慢动作

这是事件冒泡啊,
你的二个事件没有阻止冒泡,所以触发了第一个事件

 $(document).on('click', ".btn-delete", function (e) {
            alert("^~^ You have click Delete! ");
            e.stopPropagation();
        });
刘奇

这是事件冒泡,父级如果和子级绑有相同事件(如题主的click事件),则在触发子集事件的时候同时会触发父级相同事件,所以要阻止冒泡e.stopPropagation();

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage