Add class to parent on click jquery

Question

this script should do:

  var  link = $("a"),
    rate = $('<div><a href="" class="fa fa-check-circle good"></a><a href="" class="fa fa-times-circle bad"></a></div>'),
    good = $(".good"),
    wrong = $(".bad");
    good.on("click", function() {
        $(this).closest("th").addClass("good");
    });
    wrong.on("click", function() {
        $(this).closest("th").addClass("verybad");
    });

If I click to th show div with two a elements
If I click to element, for example with class .good, it should add parent .good class.

you can find whole code here

score 1 · Accepted Answer · edited May 23 '17 at 12:22

Use event delegation (as you are appending dynamically those .good and .bad DOM element):

$(document).on("click", "a", function(e) {
    e.preventDefault();
});
$(document).on("click", ".good", function() {
    $(this).closest("th").addClass("good");
});
$(document).on("click", ".bad", function() {
    $(this).closest("th").addClass("verybad");
});

Also, you have a typo in your CSS, should be:

.verybad { /* note the "y" you missed */
    color:  #e07ccd;
}

Finally, take the habit of prepending your variable names by $ if they store a jQuery object for better readability.

JSFiddle

Add class to parent on click jquery

1 Answers1