jQuery Function is calling repeatedly

Question

I am using following code, to hide and display form

$(document).ready(function() {
    $("#form_before_launch").click(function(){
        $(this).animate({height:"300px" ,width:"400px"});
        $(this).children("p").animate({fontSize:"35px"});
        $("#form").delay(500).fadeIn();
    })

    $("#close").click(function(){
        $(this).animate({height:"0px" ,width:"0px"});
    })
});

Following code is working for form_before_launch, but once I click div element with 'close' id, #close function is called and after that #form_before_launch is called again.

Is the close element inside the form_before_launch element? – Taplar Oct 25 '17 at 19:14 — Taplar, Oct 25 '17 at 19:14
@Taplar : yes its in same element – Divyam Solanki Oct 25 '17 at 19:15 — Divyam Solanki, Oct 25 '17 at 19:15
yeah, that's how click events work – Kevin B Oct 25 '17 at 19:16 — Kevin B, Oct 25 '17 at 19:16

score -1 · Answer 1 · answered Oct 25 '17 at 19:16

-1

If the element is inside the form_before_launch the event is of course propagating to both handlers.

$("#close").click(function(){
    $(this).animate({height:"0px" ,width:"0px"});
    return false;
})

answered Oct 25 '17 at 19:16

Luke

8,235
3
22
36

@Orpheus eh, i think you are incorrect. at least for jQuery bound events. finding docs. – Kevin B Oct 25 '17 at 19:19
@Orpheus returning false does both preventDefault and stopPropagation. – Taplar Oct 25 '17 at 19:20
http://api.jquery.com/on/ *"Returning false from an event handler will automatically call `event.stopPropagation()` and `event.preventDefault()`."* – Kevin B Oct 25 '17 at 19:21
Was running off a rough bit of old information. My bad. Probably useful to still deliberately invoke it on the event argument anyways to be completely unambiguous. – Orpheus Oct 25 '17 at 19:23

score -2 · Answer 2 · answered Oct 25 '17 at 19:16

-2

Try passing in 'e' to the close click event and then call e.stopPropagation() so the event doesn't bubble up to be processed by the encapsulating form_before_launch element.

answered Oct 25 '17 at 19:16

Taplar

24,788
4
22
35

jQuery Function is calling repeatedly

2 Answers2