javascript - タイミングの問題: JavaScript を介してページ上の要素をレンダリングするため、同じファイルでそれらの要素を呼び出す必要があります

Question

CoffeeScript ファイルにこのコードがあります。基本的に、クリックイベントからの応答を待って、一連liの にコンテンツを入力します。しかし、その後、jQuery でそれらの要素を取得し、別のクリック イベントを処理する必要があります。

現在のコードでは、要素がページにないため、一番下の jQuery が機能していません。

どんな助けでも本当に感謝します!

$ ->
      chrome.tabs.query("active": true, "currentWindow": true,
      (tab) -> 
        chrome.tabs.sendMessage(tab[0].id, "showTerms", 
          (response) ->
            console.log (JSON.stringify(response))
            terms = response
            for term in terms
              $(".terms").append($('<li></li>', {"class": "term", "data-term": "#{term}", "text": "#{term}"} ))

            for child in $(".terms").children()
              $(child).append($('<a></a>', {"href": "#", "class": "remove-term", "text": "x"} ))
        )
      )

  $(".terms li a").click (e) =>
    debugger
    e.preventDefault()
    termToBeRemoved = e.parent().data("term")
    chrome.tabs.query("active": true, "currentWindow": true,
      (tab) ->
        chrome.tabs.sendMessage(tab[0].id, "remove" + termToBeRemoved,
          (response) ->
            console.log response
        )
    )

Answer 1

You could attach the click events to the elements when they are loaded:

$ ->
      chrome.tabs.query("active": true, "currentWindow": true,
      (tab) -> 
        chrome.tabs.sendMessage(tab[0].id, "showTerms", 
          (response) ->
            console.log (JSON.stringify(response))
            terms = response
            for term in terms
              $(".terms").append($('<li></li>', {"class": "term", "data-term": "#{term}", "text": "#{term}"} ))

            for child in $(".terms").children()
              $(child).append($('<a></a>', {"href": "#", "class": "remove-term", "text": "x"} ))
           #Bind them here after they've been created.
            $(".terms li a").click (e) =>
              debugger
              e.preventDefault()
              termToBeRemoved = e.parent().data("term")
              chrome.tabs.query("active": true, "currentWindow": true,
                (tab) ->
                  chrome.tabs.sendMessage(tab[0].id, "remove" + termToBeRemoved,
                    (response) ->
                       console.log response
                  )
              )
        )
      )