CODEWITHSUNDEEP
javascriptjquery
Vivekanand P V
Vivekanand P V

Reputation: 891

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.

I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.

the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.

I guess this block of code needs some tweaks:

// Click event handler to toggle dropdown
$(".button").click(function(event){
    event.stopPropagation();
    // How can I call toggle for the specific div element?
    $(".app-launcher").toggle();
});

How can it be done?

Upvotes: 1

Views: 28

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337590

You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:

$(".button").click(function(event){
    event.stopPropagation();
    $(this).closest('.launcher').find(".app-launcher").toggle();
});

Updated CodePen

I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

Upvotes: 1

Related Questions