Jquery: Toggle closest parent element using .on("click")? [duplicate]

Question

This question already has answers here:

Why does click event handler fire immediately upon page load? (4 answers)

Closed 8 years ago.

Given HTML such as

<div class="tpl grey">Hosts:
    <p>Hi !</p>
    <p>How are you ?</p>
    <p>What ever.</p>
    <a href="./~">An other child & element type !</a>
</div>

How to make that a click on a child element toggle the class="grey" of the closest parent .tpl element ?

---

The following code fails :

//Action to do on parent $(".tpl") 
var switch1 = function () {
    $(this).closest(".tpl").toggleClass("blue grey");
}

// On() click event
$(document).ready(function() {
        $(".tpl").on("click", "p", switch1() );
});

Fiddle: http://jsfiddle.net/MRcCy/1

Answer 1

If you just want to toggle the closest .tpl (even though i only see one) try this

$(document).ready(function() { $(".tpl p").click(function(){ $(this).closest('.tpl').toggleClass('grey'); }); });

Answer 2

Check this fiddle

$(document).ready(function() {
    $(".tpl").click(function(){
        $('.tpl').toggleClass('grey blue');
    });
});