javascript - 为什么我的 div 中的文本字段和按钮对点击没有反应？

Question

对于学校作业，我正在与另一个学生创建一个页面。我们的老师给了我们一个 HTML-File 来为我们自己的项目克隆一些组件，这样我们就不必从头开始编写它。我们想为我们从她的文件中获取的组件创建我们自己的 .js 文件，其中包含一些侦听器。

下面的代码生成一个名为“关键字”的标签，其右侧有一个问号图标，右侧有一个文本字段。单击问号图标会打开一个带有一些选项的弹出窗口，并且文本字段允许以逗号分隔的字符串作为“关键字”。我们的问题是，在我们的 HTML 页面上，所有这些元素都可以正常显示，但是当我们单击问号图标时不会显示弹出窗口，并且单击它时也不会激活文本字段。

我们查看了老师的 HTML 文件并在上面玩了一下。我们发现，当我们将她的 js 文件作为脚本删除时，她的 HTML 文件也会发生同样的事情。因此，我们查看了她的 js 文件并检查了 55.000 行长的 js 文件以获取对这些元素的一些引用，但一无所获。所以我们不知道，为什么我们的不起作用。当我们打开 HTML 文件时，控制台在输出中没有显示错误。我们怎样才能让这些元素响应点击？我们应该在哪里寻找错误，错误？

<div class="form-group">
  <label class="control-label col-md-4 col-lg-3" for="offer_tag_list">
    <div class="inline-help form-label" data-help="&lt;b&gt;You would like to use keywords:&lt;/b&gt; In that case use one or more words for each keyword and use a comma to seperate.
br&gt;
&lt;b&gt;You want to remove a keyword?&lt;/b&gt; Then click on the &lt;i class=&quot;fa fa-remove&quot;&gt;&lt;/i&gt; symbol at the end of that keyword.
  &lt;div class=&quot;panel panel-default&quot; id=&quot;feedback-form&quot;&gt;
    &lt;div class=&quot;panel-heading&quot;&gt;
      &lt;h4 class=&quot;panel-title&quot;&gt;
        &lt;i class=&quot;fa fa-question-circle&quot;&gt;&lt;/i&gt; Was that information useful? &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
      &lt;form class=&quot;feedback&quot; role=&quot;form&quot; id=&quot;new_feedback&quot; action=&quot;/feedbacks&quot; accept-charset=&quot;UTF-8&quot; data-remote=&quot;true&quot; method=&quot;post&quot;&gt;&lt;input name=&quot;utf8&quot; type=&quot;hidden&quot; value=&quot;&amp;#x2713;&quot; /&gt;
        &lt;div class=&quot;form-group&quot;&gt;&lt;textarea placeholder=&quot;You can write comments here.&quot; class=&quot;form-control&quot; name=&quot;feedback[comment]&quot; id=&quot;feedback_comment&quot;&gt;
&lt;/textarea&gt;&lt;/div&gt;
        &lt;input type=&quot;hidden&quot; value=&quot;/offers/new&quot; name=&quot;feedback[context]&quot; id=&quot;feedback_context&quot; /&gt;
        &lt;input type=&quot;hidden&quot; value=&quot;offers.tag_list&quot; name=&quot;feedback[help_key]&quot; id=&quot;feedback_help_key&quot; /&gt;
        &lt;div class=&quot;actions&quot;&gt;          &lt;input type=&quot;submit&quot; name=&quot;feedback[helpful]&quot; value=&quot;Ja&quot; class=&quot;btn btn-default&quot; data-disable-with=&quot;Ja&quot; /&gt;          &lt;input type=&quot;submit&quot; name=&quot;feedback[helpful]&quot; value=&quot;Nein&quot; class=&quot;btn btn-default&quot; data-disable-with=&quot;Nein&quot; /&gt;&lt;/div&gt;&lt;/form&gt;      &lt;div class=&quot;hidden response&quot;&gt;
        Thank you for your Feedback!
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
" data-heading="How to use keywords?" data-help-key="offers.tag_list">
      <i class="fa fa-question-circle-o"></i>
    </div>Keywords
  </label>
  <div class="col-md-8 col-lg-9">
    <div class="bootstrap-tagsinput">
      <span class="twitter-typeahead" style="position: relative; display: inline-block;">
        <input type="text" class="tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
        <input type="text" placeholder="" class="tt-input" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="undefined_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="">
        <span role="status" aria-live="polite" style="position: absolute; padding: 0px; border: 0px; height: 1px; width: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;"></span>
        <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
        <div role="listbox" class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
          <div role="presentation" class="tt-dataset tt-dataset-tags"></div>
        </div>
      </span>
    </div>
    <input value="" data-use-tagsinput="true" class="form-control" type="text" name="offer[tag_list]" id="offer_tag_list" style="display: none;">
  </div>
</div>

标签： javascripthtmltextfieldpopupwindow