选项卡中没有按钮单击事件（Tampermonkey）

Question

我制作了包含按钮的单个选项卡。

  // Create the tab content
  const tabContent = document.createElement('div');

  // Add your desired content for each tab dynamically
  const tabContents = [
        '<button class="CodeButton" onclick="myFunction">Button1</button><br/><button class="CodeButton">Button2</button>'
  ];


function myFunction() 
{  
alert("test"); 
}

我的目标是按下按钮后会发生一些事情，例如出现通知或页面元素的大小发生变化。

不幸的是我无法让它工作，以产生“点击事件”。我想这与选项卡是“容器”这一事实有关。

Answer 1

这是因为调用函数时需要带括号：

onclick="myFunction()"   // Calling the function with parentheses "()"

这并不总是必要的，但在这种情况下是必要的。请参阅下面的示例

const tabContents = [
  `<button class="CodeButton" onclick="myFunction()">Button1</button>`, 
  `<button class="CodeButton">Button2</button>`
]

function myFunction() {  
  alert("test")
}

function selectTab(event) {
  const tab = event.currentTarget
  const selectedTab = document.querySelector('.tab.active')
  selectedTab.classList.remove('active')
  tab.classList.add('active')
}

function addTabContent(tab) {
  const tab1ContentWrap = document.querySelector(tab + ' .tab-content')
  tab1ContentWrap.innerHTML = ''
  tabContents.forEach(content => {
    tab1ContentWrap.insertAdjacentHTML('beforeend', content) 
  })
}

addTabContent('.tab-1')

.tab-group {
  display: inline-flex;
  gap: 3px;
  position: relative;
  
  .tab {
    .tab-name {
      padding: 10px;
      background-color: #ccc;
      text-align: center;
      cursor: pointer;
    }
    .tab-content {
      padding: 10px;
      display: none;
      position: absolute;
      left: 0;
    }
  }
  
  .tab.active {
    .tab-name {
      border: 2px solid #555;
    }
    .tab-content {
      display: block;
    }
  }
}

<div class="tab-group">
  <div class="tab tab-1 active" onclick="selectTab(event)">
    <div class="tab-name">Tab 1</div>
    <div class="tab-content">Place content 1 here</div>
  </div>

  <div class="tab tab-2" onclick="selectTab(event)">
    <div class="tab-name">Tab 2</div>
    <div class="tab-content">Place content 2 here</div>
  </div>
</div>