Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
onClick event on <a> or <button> is not working inside Metronic Tailwind DataTable column with NextJs
Hi
I am using Metronic v9.1.2 Tailwind with nextjs v15. But onClick is not working inside the <tbody><tr><td> of KTDataTable. Please tell how to make this onClick work ?
Whereas if i disable KTDataTable initialization then onClick work fine.
<td className="text-center">
<a className="btn btn-link" href="#" onClick={(e) => {e.preventDefault();alert("test");}}>
LinkCaption
</a>
<button onClick={() => alert("test!")}>
ButtonCaption
</button>
</td>
Replies (2)
Games that require players to create, locate, or identify words using letters, clues, or categories are known as word games.
Hi,
Can you try delegated Event Handlers in Vanilla JS:
useEffect(() => {
const tableBody = document.querySelector("tbody");
if (tableBody) {
tableBody.addEventListener("click", (e) => {
if (e.target.matches(".btn-link")) {
e.preventDefault();
alert("test");
}
});
}
return () => {
if (tableBody) {
tableBody.removeEventListener("click", () => {});
}
};
}, []);Please try the above. For native Next.js CRUD we would suggest you to wait out new product that we will release in the next week. We will provide full cycle CRUD solutions for next.js within Metronic UI style.
Regards,
Sean
