Multiple CSS classes in event configuration in AEP launch and Data collection | Community
Skip to main content
A
ASP_Corp
Level 3
August 29, 2024
Solved

Multiple CSS classes in event configuration in AEP launch and Data collection

  • August 29, 2024
  • 2 replies
  • 1220 views

Hi,

I want to configure my event, is there any way to specify multiple CSS classes?, i want the event to fire on the condition that the HTML elements that are clicked should have class A AND class B AND Class C. please refer to the screen shot. 

I want my event to fire when the element iam clicking on has class "align-L2-content" AND  "pl-1" AND "hyber-link".

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Ankit_Chaudhary

Hi @asp_corp 

You can use a custom event type with the following code.

document.addEventListener('click', function(event) { var element = event.target; if (element.classList.contains('align-L2-content') && element.classList.contains('pl-1') && element.classList.contains('hyber-link')) { // Trigger your event here trigger() } });

This code if the element which is getting click contains all three classes or not (you modify the code as per your additional requirements)

2 replies

Ankit_Chaudhary
Community Advisor
Ankit_ChaudharyCommunity AdvisorAccepted solution
Community Advisor
September 2, 2024

Hi @asp_corp 

You can use a custom event type with the following code.

document.addEventListener('click', function(event) { var element = event.target; if (element.classList.contains('align-L2-content') && element.classList.contains('pl-1') && element.classList.contains('hyber-link')) { // Trigger your event here trigger() } });

This code if the element which is getting click contains all three classes or not (you modify the code as per your additional requirements)

A
ASP_CorpAuthor
Level 3
September 3, 2024

@ankit_chaudhary , thank you. I was looking for a fix on the UI, rather than on the custom code, just curious, does the Class property in my screen shot, does it not take a comma seperated values of multiple CSS classes?

Ankit_Chaudhary
Community Advisor
Ankit_ChaudharyCommunity Advisor
Community Advisor
September 3, 2024

@asp_corp maybe not the comma seperated values but you can use a regex in the UI, however i fell like using a custom code will give more flexiblity for this use case but you can try using a regex as well if it work well your requirments.

Amruthesh_AG
Community Advisor
Amruthesh_AGCommunity Advisor
Community Advisor
October 15, 2024

@asp_corp  This custom script should solve your query.

$("a").click(function(){
if(jQuery(this).attr('class').includes('align-L2-content') && (this).attr('class').includes('pl-1') && (this).attr('class').includes('hyber-link'))
return true;
});

 

Accept the solution if is works.

Terms & ConditionsAccessibility statement

Loading footer...