Как я могу предотвратить автоматическое выполнение события onclick для тега <a>?

Question

У меня есть текстовое поле и окно поиска, которые создаются динамически. Когда пользователи ищут слово, всплывающее окно покажет, что данные включают слово. Пользователи нажимают на данные, они переходят в текстовую область.

Это простой процесс.

Итак, я написал этот код.

<button type="submit" class="btn btn-info btn-sm float-right" onclick="answer()">ANSWER</button>

function answer() {
  //console.log('answer');
  var div = document.createElement('div');

  div.className = 'row';
  div.innerHTML = '<!-- file form start -->\
                <!-- file form end -->\
                <!-- text form start -->\
                {!! Form::open([ 'route' => ['qnamembercreate', $qnaMemberData->idx], 'method' => 'post', 'files' => true, 'accept-charset' => 'utf-8' ])!!}\
                <div class="col-md-12 col-xs-12">\
                      <div class="card-body">\
                          <div class="col-sm-6 offset-md-6 p-0">\
                              <div class="input-group">\
                                  <input type="text" id="f_search" name="f_search" class="form-control">\
                                  <span class="input-group-append">\
                                      <button type="button" class="btn waves-effect waves-light btn-inverse" onclick="faq_search()">검색</button>\
                                  </span>\
                              </div>\
                          </div>\
                          <input type="hidden" name="subject" value="{{ $qnaMemberData->subject }}">\
                          <textarea id="answer_content" class="mb-0" rows="20" style="width:100%;" name="add_answer"></textarea>\
                          <div class="form-group">\
                            <input name="fileToUpload" type="file" class="filestyle" data-input="false" id="filestyle-1" tabindex="-1" style="display: none;">\
                            <div class="bootstrap-filestyle input-group">\
                              <div style="position: absolute; width: 100%; height: 35.375px; z-index: -1;"></div>\
                              <span class="group-span-filestyle " tabindex="0">\
                                <label for="filestyle-1" style="margin-bottom: 0;" class="btn btn-secondary btn-sm fload-right">\
                                  <input type="file" name="fileToUpload" class="filestyle-1" data-placeholder="" data-buttontext="첨부파일" data-buttonname="btn-secondary">\
                                </label>\
                              </span>\
                            </div>\
                          </div>\
                          <button type="button" class="btn btn-danger btn-sm float-right ml-1 mt-1" onclick="history.back()">취소</button>\
                          <button type="submit" class="btn btn-success btn-sm float-right mt-1">등록</button>\
                      </div>\
                  </div>\
                  {!! Form::close() !!}\
                  <!-- text form end -->';

  document.getElementById('replyData').appendChild(div);
  document.getElementById('answer').remove();

  $('#answer_content').summernote({
      tabsize: 2,
      height: 200,
      lang: 'ko-KR',
      fontNames: ['Gulim',  'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', ],
      fontNamesIgnoreCheck: ['Gulim'],
  });
}

// FAQ Search
function faq_search() {
    var word = $('#f_search')[0].value;
    $.ajax({
        url : '/guidesearch',
        type : 'POST',
        data : {
            keyword: word
        },
        cache : false,
        success : function(data, jqXHR, textStatus) {
            console.log(data);
            faq_popup(data);
        }
    });
}

// faq_popup
function faq_popup(data) {
    var _html = '';
    _html = '<div class="modal fade show" tabindex="-1" id="myModal" role="dialog" style="positon:center;">\
              <div class="modal-dialog modal-dialog-centered">\
                <!-- Modal content-->\
                  <div class="modal-content">\
                    <div class="table-responsive">\
                            <table class="table mb-0">\
                                <tbody>';

    for (var i = 0; i < data.length; i++) {
        _html += '<tr>\
                    <th scope="row">'+ (i + 1) +'</th>\
                     <td><a style="cursor:pointer" onclick="'+ getContent(data[i]['content']) +'">' + data[i]['subject'] + '</a></td>\
                   </tr>';
    }

    _html += ' </tbody>\
              </table>\
            </div>\
          </div>\
        </div>\
      </div>';

    $('#modal_place').append(_html);
    $('#myModal').modal('show');
}

function getContent(data) {
    //console.log(data);
    $('#answer_content').summernote('code', data);
    $('#myModal').modal('hide');
}

Но проблема в том, , функция getContent выполняется автоматически, прежде чем я щелкаю по теме. Я искал некоторые решения, которые предлагают просто удалить скобки, но в моем случае мне нужно передать параметр, чтобы я не мог удалить скобки.

Как я могу предотвратить это автоматическое выполнение c и сделать его правильным

Answer 1

Создайте TR, затем выберите внутреннюю кнопку и присоедините прослушиватель событий, используя вместо этого addEventListener, что обеспечит надлежащее закрытие для контента, который вы хотите передать getContent. Используйте литералы шаблона для создания читаемых, интерполируемых многострочных строк:

function faq_popup(data) {
  const appendedDiv = $(`
  <div class="modal fade show" tabindex="-1" id="myModal" role="dialog" style="positon:center;">
    <div class="modal-dialog modal-dialog-centered">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="table-responsive">
          <table class="table mb-0">
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>`);
  const tbody = appendedDiv.find('tbody')[0];
  data.forEach(({ content, subject }, i) => {
    const tr = tbody.appendChild(document.createElement('tr'));
    tr.innerHTML = `
      <th scope="row">${i + 1}</th>
      <td><a style="cursor:pointer">${subject}</a></td>
    `;
    tr.querySelector('a').addEventListener('click', () => getContent(content));
  });

  $('#modal_place').append(appendedDiv);
  $('#myModal').modal('show');
}