I have a child component which will show list of search result. For some reason onclick event is not firing which is sometimes.

So as an alternative i am trying to add click event to search list.

Here is the component

<ul class="slds-listbox slds-listbox_vertical" role="presentation">
      <template for:each={records} for:item="record">
         <li key={record.Id}  data-id={record.Id} role="presentation" data-name={record.Name} data-icon={record.icon} data-class="myList">
              <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option">
                    <lightning-icon class="slds-icon slds-icon--small slds-icon-text-default" icon-name={record.icon} alternative-text={objName} size="small"></lightning-icon>
                          <span class="slds-truncate" style="font-size:13px;">{record.Name}</span>


    // this.template.querySelector('li').
    // this.template.querySelector('myList').addEventListener('click',this.handleSelectTag.bind(this));
    // window.addEventListener('click',this.handleSelectTag.bind(this));
    let e = this.template.querySelectorAll('li[data-class="myList"]');
    console.log("setupAssisstants---<", e[0]);                //This is getting undefined
    e[0].addEventListener("click", this.handleSelectTag)

I am getting the querselectorall result as null. Can anyone please help to point out what am i doing it wrong

  • 2
    This is an X-Y problem. This question presumes the position Y (that you need to add event handlers dynamically), but it won't work. You should bind directly in the template, if possible. If you're still having problems, ask about that problem instead. This solution can't work, as during connectedCallback(), no elements have been rendered yet.
    – sfdcfox
    Commented Feb 18, 2021 at 19:44
  • @NBR, out of curiosity, why are you using a custom attribute for the class, instead of using class?
    – glls
    Commented Feb 18, 2021 at 19:45
  • @glls I did it for a try. I tried with using class attribute.But wasnt working
    – NBR
    Commented Feb 19, 2021 at 5:12
  • querySelector is returning undefined because connectedCallback runs when the component is connected to the DOM, it has not rendered yet, the way eventloop can get tricky is sometimes it would render by the time flow reaches the queryselector line. A bad route would be to delay the connectedcallback, and a good route would be to bind it directly in the template <li key={record.Id} data-id={record.Id} role="presentation" data-name={record.Name} data-icon={record.icon} data-class="myList" onclick={handleSelectTag} > Commented Feb 19, 2021 at 5:25
  • 1
    Yes, but we might be able to help. We want to help. We want you to get the right answer.
    – sfdcfox
    Commented Feb 19, 2021 at 6:56


You must log in to answer this question.

Browse other questions tagged .