Javascript将不存在的类分配给变量

Question

点击此按钮后：

var option_btn = document.querySelectorAll('[class*="sp_choice_type"]')[1]

以下按钮将在网络中可用：

var refuse = document.querySelector('[class*="priv-reject-btn"]')[0]

但是在点击那里之前不可用，下面这段代码将不起作用：

var option_btn = document.querySelectorAll('[class*="sp_choice_type"]')[1]
option_btn.addEventListener('click', ()=>{
    setTimeout(()=>{
        var refuse = document.querySelector('[class*="priv-reject-btn"]')[0];
        refuse.addEventListener('click',() =>{
            console.log("Eureka")
    })
    }, 5000)
})

我也尝试过一些 Promises，但也没有成功。

该案例位于 zonebourse.com 网站中，按钮选项来自 botton 免责声明和“Tout 拒绝者”，该按钮在单击选项后触发

Answer 1

如果没有看到您所面临问题的有效示例，就很难确定问题是什么。当用户单击另一个按钮（按钮 A）并在按下按钮 B 时执行操作时，您似乎正在尝试向页面添加一个新按钮（按钮 B）。考虑到这一点，这里有一个向页面添加按钮并在单击该新按钮时执行操作的示例。代码已注释，但如果您有任何问题或不清楚的地方，请告诉我，我会改进我的答案。

// find all option buttons
var options = document.querySelectorAll('.option');
// loop over all option buttons
[...options].forEach((opt) => {
  //  wire event handler for click
  opt.addEventListener('click', (e) => {
    // check if we have already added the button
    if (!e.target.actionButton) {
      // return a promise instead of setTimeout for better async
      return new Promise((resolve, reject) => {
        // create the new button
        var btn = document.createElement("button");
        // pull out the option attribute to make it easier to reference later
        var optionAttr = e.target.getAttribute('data-option')
        // store the option for this button
        btn.setAttribute('data-option', optionAttr);
        // wire the click handler for this button
        btn.addEventListener('click', (ev) => {
          // get the option
          var option = ev.target.getAttribute('data-option');
          // just log for now
          console.log(`you clicked ${option}`)
        });
        // set the text of the button
        btn.innerHTML = `Action Button ${optionAttr}`;
        // store a reference to the action button on the option button
        e.target.actionButton = btn;
        // append the new action button to the action button container
        document.querySelector('#buttons').append(btn);
        // resolve the promise
        resolve();
      });
    }
  })
});

button {
  display: inline-block;
  margin: .5em;
  padding: .5em;
}

#buttons button {
  display: inline;
  margin: .5em;
  padding: .5em;
}

<button class="option" data-option="1">
Option 1
</button>
<button class="option" data-option="2">
Option 2
</button>
<div id="buttons">

</div>