javascript - 如何在未定义的 getElementsByClass 上运行 addEventListener？

Question

这个问题已经有答案了:

Why does jQuery or a DOM method such as getElementById not find the element? (7 个回答)

已关闭 3 年前。

我有一个搜索输入，当用户键入时，它会在其下方的 div 中填充建议，并且我想向建议 div 添加一个事件监听器。问题是，当页面加载时，建议 div 未填充任何内容，因为用户尚未在搜索输入中输入任何内容，并且会抛出

TypeError: searchSugg is undefined

有办法解决这个问题吗？我尝试将监听器包装在 if (searchSugg !== undefined) {...} 中虽然它不会抛出错误，但它也不会运行 addEventListener功能。

代码:

    var searchSugg = document.getElementsByClassName('mapboxgl-ctrl-geocoder--suggestion')[0];  
    searchSugg.addEventListener('click', function() {
        // // Create variables to use in isochrone API
        var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
        var lng = geocoder.mapMarker._lngLat.lng;
        var lat = geocoder.mapMarker._lngLat.lat;
        var profile = 'cycling';
        var minutes = 10;
        // Create a function that sets up the Isochrone API query then makes an Ajax call
            var query = urlBase + profile + '/' + lng + ',' + lat + '?contours_minutes=' + minutes + '&polygons=true&access_token=' + mapboxgl.accessToken;
                    $.ajax({
                    method: 'GET',
                    url: query
                    }).done(function(data) {
                        map.getSource('iso').setData(data);
                    })
        map.addSource('iso', {
            type: 'geojson',
            data: {
            'type': 'FeatureCollection',
            'features': []
            }
        });
        map.addLayer({
            'id': 'isoLayer',
            'type': 'fill',
            // Use "iso" as the data source for this layer
            'source': 'iso',
            'layout': {},
            'paint': {
            // The fill color for the layer is set to a light purple
            'fill-color': '#5a3fc0',
            'fill-opacity': 0.3
            }
        }, "poi-label");
    });

Answer 1

您可以在分配 click 处理程序之前检查 searchSugg 是否存在。

let searchSugg = document.getElementsByClassName("some-class-that-does-not-exist")[0];

searchSugg && searchSugg.addEventListener('click', event => {
  // click event handler code
});

// Or you can do
if (searchSugg) {
  searchSugg.addEventListener('click', event => {
    // click event handler code
  });
}

<p>Some Webpage</p>