Почему текстовые поля и кнопки в моем div не реагируют на клики? - PullRequest
0 голосов
/ 08 октября 2019

Для школьной домашней работы я создаю одну страницу с другим учеником. Наш учитель дал нам HTML-файл для клонирования некоторых компонентов нашего собственного проекта, чтобы нам не пришлось писать его с нуля. Мы хотим создать наш собственный файл .js с некоторыми слушателями для компонентов, которые мы берем из ее файла.

Приведенный ниже код создает метку под названием «ключевые слова» со значком вопросительного знака справа и текстовым полем справа. Щелчок по значку вопросительного знака открывает всплывающее окно с некоторыми параметрами, а текстовое поле допускает разделенные запятыми строки в качестве «ключевых слов». Наша проблема в том, что на нашей HTML-странице все эти элементы отображаются без проблем, но всплывающее окно не отображается, когда мы нажимаем на значок вопросительного знака, и текстовое поле также не активируется, когда мы нажимаем на него.

Мы посмотрели HTML-файл нашего учителя и немного поиграли на нем. Мы выяснили, что когда мы удаляем ее js-файл как скрипт, то же самое происходит и с ее HTML-файлом. Поэтому мы просмотрели ее js-файл и проверили js-файл длиной 55 000 строк на наличие ссылок на эти элементы и ничего не нашли. Поэтому мы не знаем, почему у нас не работает. Консоль не показывает ошибок в выводе, когда мы открываем наш HTML-файл. Как мы можем заставить эти элементы реагировать на клики? где мы должны искать ошибки, ошибки?

<code><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;">
...