为什么第一次点击没有触发？

Question

第一次点击没有触发，我不知道为什么。

所有后续点击都可以正常工作。如果我重新加载页面，同样的问题：第一次点击：没有任何反应。

我已经尝试访问其他 html 元素作为 queryselector 中的测试，但这并没有什么不同。

这是代码（我正在尝试在 vanilla JS 中执行此操作）：

const cities = [];
fetch(endpoint)
  .then(blob => blob.json())
  .then(data =>cities.push(...data));

function findMatches(wordToMatch, cities) {
  return cities.filter(place => {
    const regex = new RegExp(wordToMatch, 'gi'); 
    return place.city.match(regex) || place.state.match(regex) 
  });
}

function displayMatches() {
  const matchArray = findMatches(this.value, cities);

  const html = matchArray.map(place => {
  const regex = new RegExp(this.value, 'gi');
  const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
  const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);

    return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}      </span>
      </li>
    `;

  }).join(''); 
  suggestions.innerHTML = html; 

   // this only works on the second click:
  const searchResult = document.querySelectorAll('li'); 
  searchResult.forEach(el => {
    el.addEventListener('click', function(){
      console.log('hi'); 

  })})


const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

searchInput.addEventListener('change', displayMatches); // change only fires once user navigates away from input field!
searchInput.addEventListener('keyup', displayMatches);

}

Answer 1

已编辑：问题来自具有焦点的搜索输入，因此单击建议将 blur 输入，然后由于某种原因忽略列表项上的单击事件（请参阅相关讨论 here）。在您的情况下，使用 mousedown 而不是 click 似乎可以解决问题，请参阅下面更新的 sn-p。

const cities = [];

// fetch(endpoint)
// 	.then(blob => blob.json())
// 	.then(data =>cities.push(...data));

// mocking fetch here
_fetch = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve([
				{city: 'Los Angeles', state: 'CA', population: '4M'},
				{city: 'New York City', state: 'NY', population: '8.4M'},
				{city: 'Atlanta', state: 'GA', population: '0.5M'},
			]);
		}, 1000);
	});
};

_fetch()
	.then(data => cities.push(...data));

function findMatches(wordToMatch, cities) {
	return cities.filter(place => {
		const regex = new RegExp(wordToMatch, 'gi'); 
		return place.city.match(regex) || place.state.match(regex);
	});
}

function displayMatches() {
	const matchArray = findMatches(this.value, cities);
	
	const html = matchArray.map(place => {
		const regex = new RegExp(this.value, 'gi');
		const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
		const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
		
		return `
			<li>
				<span class="name">${cityName}, ${stateName}</span>
				<span class="population">${place.population}</span>
			</li>
		`;
		
	}).join('');
	
	suggestions.innerHTML = html; 
	
	// this only works on the second click:
	const searchResult = document.querySelectorAll('li'); 
	searchResult.forEach(el => {
		el.addEventListener('mousedown', e => {
			console.log(`Say hi to ${e.currentTarget.innerText}`);
		});
	});
}

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
// change only fires once user navigates away from input field!
searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

<input type="text" class="search" />
<ul class="suggestions">

</ul>