Javascript отключает модальную всплывающую кнопку в начальной загрузке 4

Question

JSFiddle DEMO: https://jsfiddle.net/2yx16k8L/

Мне нужен этот код JS, чтобы можно было открывать весь DIV при нажатии. Тем не менее, это отключает модальную кнопку в раскрывающемся списке. Модал больше не открывается.

Как мне это сделать?

HTML:

<div class="project__body" onclick="location.href='next.html';">
  <div class="row">
    <div class="col-10">
      <h1>Title of the DIV!</h1>
    </div>
    <div class="col-2 text-right">
      <div class="dropdown">
        <button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="edit.html">Edit</a>
          <a class="dropdown-item" href="delete.html">Delete</a>
          <a class="dropdown-item" data-toggle="modal" data-target="#modal">Copy</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
    </div>
  </div>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal">Title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>
        </div>
        <div class="modal-body">
          Body of the modal
        </div>
      </div>
    </div>
  </div>

JS:

$('.dropdown').click(function(event) {
  $(this).children(".dropdown-menu").toggle()
  event.stopPropagation();
})

Answer 1

Добавить это:

$(".dropdown-item[data-target='#modal']").click(function(){
    $("#modal").modal("show");
});

Демо-версия: https://jsfiddle.net/q31juvra/