Jquery :: Вызов функций дважды во вложенных <div>?

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

Используйте 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 2

Попробуйте это:

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

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

Событие в настоящее время всплывает в DOM-дереве.

Answer 3

Восстановить ширину кнопки закрытия по клику # child1

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