CODEWITHSUNDEEP
jqueryhtml
tushar747
tushar747

Reputation: 683

Jquery slideup and slideup ignore parent div

I want the user to be able to click on the div, to slideDown another child div. When the user clicks on a button inside that child div, the child div will slideUp.

With the following JQuery, the div is sliding down fine. However when I click on the button, it is sliding up then promptly sliding down again. 

<script type="text/javascript">
    $('.comment').hide() // hides all the divs which have been generated. These are the ones that need to slideUp and slideDown. 


    $(".listview-item-inside-comment").live('click', function () {
        $(this).find(".comment").slideDown();
    });


    $(".form-button").live('click', function (e) {
        if($(e.target).is(":hidden")) return;
        $(this).parents(".comment").slideUp();
    });

</script>

And in case it helps, here is the HTML:

<div class="listview-item-comment">
    <div class="listview-item-inside-comment">
        <a>Here is a comment...</a>
        <div class="listview-item-info">
            username @ timestamp
            <a style="float: right;">click to reply</a>
        </div>

        <div class="comment">
            <form>
                <textarea name="commentField">Write your comment here...</textarea>
                <p align="center">
                    <input type="submit" class="form-button" value="Submit Comment" />
                    <input type="button" class="form-button" value="Cancel" />
                </p>
            </form>
        </div>
    </div>
</div>

Thank you very much!

Upvotes: 1

Views: 1080

Answers (1)

Ortiga
Ortiga

Reputation: 8824

Your child click is bubbling up the dom three, causing the parent click to be triggered again.

Change your code to:

 $(".form-button").live('click', function (e) {

        e.stopPropagation(); // stop event bubling

        if($(e.target).is(":hidden")) return;
        $(this).parents(".comment").slideUp();
    });

Upvotes: 3

Related Questions