Question

我有这段代码：

<div id="parent1">
    <div id="child1"></div> <!-- Which is a close button -->
</div>

我的jquery

$("#parent1").click(function(){
    // Enlarge the image to 1000px
})

$("#child1").click(function(){
    // Stop the animation
    $("#parent1").stop();
    // restore the width to original one: 320px
})

现在的问题是，当我点击“关闭按钮”时，它会调用这两个函数，并且它不会恢复到原始宽度。我该如何解决这个问题？

Answer 1

试试这个：

$("#child1").click(function(event){
    event.stopPropagation();
    // Stop the animation
    $("#parent1").stop();

    // restore the width to original one: 320px
})

该事件目前正在冒充DOM树。

Answer 2

使用event.stopPropagation或event.stopImmediatePropagation来阻止事件冒泡。

示例 -

$("#child1").click(function(event){
    event.stopImmediatePropagation();
    // Stop the animation
    $("#parent1").stop();
    // restore the width to original one: 320px
})

演示 - http://jsfiddle.net/Jq6GB/

Answer 3

单击＃child1

，恢复关闭按钮的宽度

$("#child1").click(function(event){
    $("#parent1").stop();
    $("#parent1").css("width","320px");
    //or
    //event.stopPropagation();
})

Jquery ::在嵌套<div>？</div>中调用两次函数

3 个答案: