I create WordPress Plugin A with button whose id is ‘convert-button’ and there is a JS function like below:
$(‘#convert-button’).on(‘click’, function() {
However, in Plugin B, there is also a button with id ‘convert-button’, and it also has a function like below:
$(‘#convert-button’).on(‘click’, function() {
Now the problem is when I click the “convert” button in Plugin A, both onclick functions in two plugins will be called. How to prevent this? One way is to rename the id of the button, but there are many such buttons and it is time-consuming to rename all of them. Is there better solution for such a case?
To avoid the issue where both plugin functions are called when you click the convert button, you can use descendant selectors in CSS.
This allows you to target the specific button within each plugin's container. Here’s an example:
For plugin A, if your container has a ID like #plugin-a-container :
$('#plugin-a-container #convert-button').on('click', function() {
For plugin B, if your container has a ID like #plugin-b-container:
$('#plugin-b-container #convert-button').on('click', function() {