jQuery on(click) doesn't work but on(hover) does

Question

After initialize js I create new <div> element with close class and on("click") function doesn't work.

$(document).on('click', '.post-close', function () {
        alert("hello");
});

but on('hover') work perfectly.

$(document).on('hover', '.post-close', function () {
        alert("hello");
});

but I need to make it work on click.

I would also try running your code through the W3C validator, sometimes DOM issues can cause problems with javascript events. validator.w3.org — Steven Hunt
– Steven Hunt, Commented Oct 18, 2012 at 13:36

danwellman · Accepted Answer · 2012-10-18 17:24:51Z

4

It's because you're not preventing the default behaviour of the browser. Pass e into your handler and then use e.preventDefault()

$(document).on('click', '.post-close', function (e) {
    e.preventDefault();
    alert("hello");
});

Edit

Also, bind the handler before creating the new <div>

edited Oct 18, 2012 at 17:24

answered Oct 18, 2012 at 13:36

danwellman

9,4018 gold badges65 silver badges93 bronze badges

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

1 Comment

danwellman Over a year ago

do you get any errors in the console or anything? What if you console.log() instead of alert?

user400654 · Accepted Answer · 2012-10-18 14:23:59Z

1

why not use something like

$('.post-close').click(function(){
   //do something
});

If the element was added dynamically use:

$(document).on('click', '.post-close', function(){
   //do something
});

edit:
like danWellman said, you can add the preventDefault IF you want to make sure no other code is executed. otherwise use the code above.

edit2:
changed the .live to .on

edited Oct 18, 2012 at 14:23

user400654

95.1k16 gold badges168 silver badges188 bronze badges

answered Oct 18, 2012 at 13:36

Ruben Verschueren

84215 silver badges31 bronze badges

3 Comments

Geert Over a year ago

.live(); is deprecated, use .on(); instead: "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()."

Ruben Verschueren Over a year ago

@GeertJaminon: thanks for the update. Guess I'm a bit behind on my jquery versions.

Richard Neil Ilagan Over a year ago

@Ruben ~ not only that, actually, but you posted what is essentially the same code. I think what you wanted to share was that for dynamically added elements, you want to use the delegate flavor of .on(). That has a syntax of container.on(eventtype, selector, handler).

rokuta · Accepted Answer · 2016-07-31 14:49:47Z

0

It's an old post but I've had a exactly same problem (element created dynamically, hover works, but click doesn't) and found solution. I hope this post helps someone.

In my case, I found ui-selectable is used for parent element and that was preventing from click event propagate to the document.

So I added a selector of the button element to ui-selectable's 'cancel' option and problem solved.

If you have a similar probrem, check this

Try turn of libraries for parent element
You're not using stopPropagation() in parent element ?

answered Jul 31, 2016 at 14:49

rokuta

411 silver badge5 bronze badges

Collectives™ on Stack Overflow

jQuery on(click) doesn't work but on(hover) does

3 Answers 3

Edit

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related