WordPress Avada按钮添加onclick属性转义异常问题求助

问题原因 #

Avada模块编辑器在处理额外属性时，会对引号做自动转义处理，导致你输入的onclick=currentDiv(1, 'color')被错误转义为onclick=currentDiv(1," 'color')，直接破坏了原有JS逻辑。

可行解决方法 #

方法1：改用HTML模块直接创建按钮

如果不需要Avada按钮的预设样式，直接用HTML模块插入按钮代码即可（你已验证此方式有效）：

<button onclick="currentDiv(1, 'color')">Color 1</button>

要是需要保留Avada按钮的样式，可以先复制Avada按钮生成的原生HTML结构，替换其中的onclick属性后，再放到HTML模块中使用。

方法2：用JS事件绑定替代内联onclick属性（推荐）

这种方式既能保留Avada按钮的样式，又能彻底避开编辑器的转义问题：

1. 在Avada按钮模块的「自定义CSS类」字段中，添加一个唯一类名，比如color-switch-btn-1
2. 进入WordPress后台「外观」→「自定义」→「额外JS」，添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const targetBtn = document.querySelector('.color-switch-btn-1');
  if (targetBtn) {
    targetBtn.addEventListener('click', function() {
      currentDiv(1, 'color');
    });
  }
});

3. 保存更改后，点击按钮即可触发对应的JS函数。

方法3：调整引号写法尝试绕过转义

在Avada按钮的额外属性字段中，尝试将参数的单引号换成转义双引号，同时用双引号包裹整个onclick属性：

onclick="currentDiv(1, \"color\")"

不过这种方法依赖Avada的转义逻辑，可能随主题更新失效，优先级低于前两种方法。

内容的提问来源于stack exchange，提问作者eksport