Jquery on('click') not firing after first click

Question

I have some HTML:

<div class="post-container self">
    <a href="/user/Wiz">
        <img class="avatar" alt="Profile Picture" src="">
    </a>
    <div class="post-body">
        <div class="post" style="margin-left:0px;">
            <div class="post-timestamp" style="display:inline-block;float:right">
                <a href="/posts/80" style="color:#999">Oct 31</a>
            </div>
            <div class="post-functions dropdown displaynone" style="float:right;margin-right:5px;">
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                    <i class="icon-cog"> 
                    </i>
                </a>
                <ul class="dropdown-menu post-dropdown" role="menu" aria-labelledby="dLabel">
                    <a class="post-delete" href="javascript:void(0)"><i class="icon-trash"> </i>Delete</a>
                </ul>
            </div>
        </div>
    </div>
</div>

And with that, I have some Jquery:

$('.posts-content').on('click', '.post-delete', function(e) {
                $('.post-dropdown').dropdown();
                if (confirm('Are you sure you want to delete this post?')) {
                    var $this = $(this);
                    $.ajax({
                        url: '/a/delete_post',
                        type: 'POST',
                        dataType: 'json',
                        data: {'p' : post_id},
                        success: function() {
                            //... 
                            return true;
                        }
                    });
                }
                return false;
            });

Everything works perfectly the first click, but if I go to another post, and try to click .post-delete, the event never fires, and nothing shows up in the console. It also works if I use $.click(), but I need to dynamically create elements. Why does the $.on('click') not fire the second click?

$this.parent().parent().parent().parent().parent() this is really really bad practice. — gdoron
– gdoron, Commented Nov 9, 2012 at 3:26
Yea, its just that theres so much nesting its hard to get out of. — Wiz
– Wiz, Commented Nov 9, 2012 at 3:27

gdoron · Accepted Answer · 2012-11-09 03:28:37Z

1

My guess is that dropdown plugin you use change the DOM structure.

$('.post-dropdown').dropdown();

BTW,

$this.parent().parent().parent().parent().parent() this is really really bad practice.
You should use closest instead.

answered Nov 9, 2012 at 3:28

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Wiz Over a year ago

Oh wow, it was the dropdown plugin. Interesting, I'll have to look into this. Removing it fixes the problem. Thanks!

Wiz Over a year ago

Oh and wow, just did some research on $.closest. Never knew it existed. Is it faster (even though optimization at this level is not something I should be worrying about)?

gdoron Over a year ago

@Wiz. Some plugins are bad and some are even worse... Watch out when you pick one, many noobs write plugins this day...

gdoron Over a year ago

@Wiz. It's not faster, but it's hell more readable. (it the difference will be in 0.00001 +- between the two, so... don't waste your time on it)

Wiz Over a year ago

Yea thats what I was thinking. Thanks! (I'll accept the answer when I can)

kendaleiv · Accepted Answer · 2012-11-09 03:27:50Z

0

If you are dynamically creating elements try:

$(document).on('click', '.post-delete', function(e) { });

answered Nov 9, 2012 at 3:27

kendaleiv

5,8233 gold badges31 silver badges39 bronze badges

2 Comments

gdoron Over a year ago

This is not good practice, it's almost like using live which is deprecated.

Wiz Over a year ago

I've tried that, and when I do that, it completely breaks the whole thing. The first click doesn't event work. .posts-content is static anyways and will always be loaded.

Collectives™ on Stack Overflow

Jquery on('click') not firing after first click

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related