Jquery .click() not working

Question

The problem with .click() is that I have this code:

$(".masteries").click(function()
{
    $(".masteries").css("background-color","red");
});

And when I click on a div with class "masteries" nothing happens, though If I click on div with this code:

$("body").click(function()
{
    $(".masteries").click(function()
    {
        $(".masteries").css("background-color","red");
    });
});

Everything works just fine. What COULD be the problem?

Are your elements dynamically added ? Or added after you do the binding ? If so, *that* is the problem. See http://stackoverflow.com/questions/15090942/jquery-on-method-not-working-on-dynamic-content — Denys Séguret, Dec 03 '14 at 14:56
Your second example is incorrect too as you should seldom need to register event handlers *inside event handlers*. — iCollect.it Ltd, Dec 03 '14 at 14:57
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — iCollect.it Ltd, Dec 03 '14 at 15:17

PeterKA · Accepted Answer · 2014-12-03T15:07:28.663

1

If your .masteries elements are created after the page is loaded (DOM ready), then use event delegation:

$(document).on('click', '.masteries', function() {
    $(this).css("background-color","red");
});

If the .masteries elements do exist at DOM ready event, then use the following:

$(document).ready(function() {
    $(".masteries").on('click', function() {
       $(this).css("background-color","red");
    });
});

edited Dec 03 '14 at 15:07

answered Dec 03 '14 at 14:58

PeterKA

24,158
5
26
48

Thank you, this actually worked, I'm not sure what's the difference between using .click() and .on(), though I'll do some research about it. Thanks again! I'll accept your comment in 6mins – dnccc12333 Dec 03 '14 at 15:04
Great! Glad you found this helpful. Enjoy! – PeterKA Dec 03 '14 at 15:07

iCollect.it Ltd · Answer 2 · 2014-12-03T15:14:28.703

If you are loading elements dynamically, you can use a delegated event handler instead, attached to a non-changing ancestor of the changing elements:

$(document).on('click', '.masteries', function() {
    $(".masteries").css("background-color","red");
});

This works by listening for the event (e.g. click) to bubble up to the ancestor element, then applies the jQuery selector to any elements in the bubble-chain, then applies the function only to any matching elements that caused the event. This means the elements only have to exist at event time and not event registration time.

Use document as your default, and not 'body' as 'body' has a nasty bug (if styling causes a calculated body height of 0 it gets no mouse events bubbled to it!)

Previous suggestion below:

That behavior sounds like you are just missing a DOM ready handler, but without a complete example this is only a guess. body does exist at all times, but .masteries only matches if your code follows the elements in the page.

$(function(){
    $(".masteries").click(function()
    {
        $(".masteries").css("background-color","red");
    });
});

Notes:

$(function(){...}); is just a shortcut for $(document).ready(function(){});
Your second example registers a additional click event every time you click on the page. This is to be avoided :)

I have document.ready function and the code that I posted is inside of it, but that's not the case, there is some other problem. — dnccc12333, Dec 03 '14 at 15:02
@dnccc12333: Hopefully the detailed explanation was sufficient for you to understand the differences between `click` and delegated `on` event handlers, but I shall go waste my time elsewhere now :) — iCollect.it Ltd, Dec 03 '14 at 15:16

Jquery .click() not working

2 Answers2