Question

我有一段代码是由innerHTML插入的，同时有API的响应：（用于视觉的bootstrab和bootswatch）

我无法将事件附加到不存在的按钮上，因此我正在监听单击父div容器。

< div class="container">
    < div class="card mb-2">
        < div class="card-body">
          <h4 class="card-title full-title" id="${i}">${some text}</h4>
          <h6 class="card-subtitle mb-2 text-muted">some text</h6>          
          <br>      
          < button  class="card-link btn btn-outline-danger to-fav" id="${i}">♡</button>
          <a target="_blank" rel="noopener noreferrer" href="#" class="card-link">Trailer ▷</a>
        < /div>
    < /div>

h4 id与按钮ID匹配。我想监听点击事件并在单击具有匹配ID的按钮时返回h4的textContent。我尝试了几件事：

 function logText(e) {
  let el = this.querySelectorAll('.full-title');
  if(!e.target.matches('.to-fav')) return;
  console.log(e.target);  

  for (i = 0; i < el.length; i++) {
    console.log(el[i].textContent);
  }  
}

然后我将获得每个h4的.textContent数组，这在只有一个时会很好。但是，如果响应不止一个，并且用户希望标记特定的响应，则会出现问题。

我可以侦听父容器上的单击，并返回最匹配元素的.textContent。

function pressHeart(e) { 
  let el = e.target.closest('.full-title');   

  if(el !== null) {
    console.log(el.textContent);

  } else {
    false;
    console.log('does not work as you wish to...');
  }    
  //optional for safety reasons -> e.stopPropagation();    
}

我可以在此处作弊并重新设计UI，以使用户在单击附近放置的按钮时有种工作的感觉。如果没有其他选择，我可以使用此解决方案。

到目前为止我发现了什么： https://stackoverflow.com/questions/26879630/capturing-clicks-on-all-a-tags-using-eventlistener

以及一些视频，文学等，但是还没有找到解决该问题的答案或建议。

捕获点击并返回“ id / class / data”匹配元素的文本内容

0 个答案: