the answer for all question about Oxygen Builder plugin and WordPress

Hi, I’ve added this javascript code to repeater div to make them clickable but i


Hi, I’ve added this javascript code to repeater div to make them clickable but it’s only working for the first one. I have created classe for the main div and for the main link and changed it in the code but on the frontend only the first post/page is clickable, the rest are not. Can someone please help me.

Reference: https://css-tricks.com/block-links-the-search-for-a-perfect-solution/

const card = document.querySelector(“.card”);
const mainLink = card.querySelector(“.main-link”);
const clickableElements = Array.from(card.querySelectorAll(“a”)); //we are using ‘a’ here for simplicity but ideally you should put a class like ‘clickable’ on every clicable element inside card(a, button) and use that in query selector

clickableElements.forEach((ele) =>
ele.addEventListener(“click”, (e) => e.stopPropagation())
);

function handleClick(event) {
const noTextSelected = !window.getSelection().toString();

if (noTextSelected) {
mainLink.click();
}
}

card.addEventListener(“click”, handleClick);



Source

1 Comment
  1. Don Julien says

    This is way to complicated. And querySelector only selects the first element, you need to use querySelectorAll to select multiple elements and run them through a loop.

Leave A Reply

Your email address will not be published.

Oxyrealm Docs