onclick - bootstrap modal is not triggered when button is clicked - jQuery

Question

I try to display a bootstrap pop up modal from a click handler in a div. I have tried many different ways but none of them worked so far, some help would be appreciated. I am able to trigger the modal from a link in my header, but somehow the same logic doesn't apply in the body.Screenshot here

Desired behavior: on click of "Edit" in the card, I trigger a modal to update my post.

code:

const updatePostModal = (myPost) => {
  const editPostElement = $(`
  <div class="modal" id="editPostModal" aria-hidden="true">  
  <form class="editPostForm">  
  <div class="card" style="width: 35rem;">
  <div class="card-body-createPost">
  <h3 id="titleAlert">Edit Post</h5>
  <div class="mb-3">
  <label for="createPostTitle">Title</label>
  <input type="text" class="form-control" placeholder="required" id="createPostTitle" required>
  </div>
  
  <div class="mb-3">
  <label for="createPostDescription">Description</label>
  <textarea type="text" class="form-control" placeholder="required" id="createPostDescription" required></textarea>
  </div>
  
  <div class="mb-3">
  <label for="createPostPrice">Price</label>
  <input type="text" class="form-control" placeholder="required" id="createPostPrice" required>
  </div>
  
  <div class="mb-3">
  <label for="createPostLocation">Location</label>
  <input type="text" class="form-control" placeholder="optional" id="createPostLocation">
  </div>
  
  <div class="mb-3">
  <label for="createPostWillDeliver">Will Deliver</label>
  <input type="checkbox" class="form-control" id="createPostWillDeliver">
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal" id="editPostCloseButton">Close</button> 
    <button type="button" class="btn btn-lg btn-primary" id="editPostSubmitButton">Submit</button>
  </div>
  <input hidden type="text" id="hiddenId"></input>
  </div>
  </div>
  </form>
  </div>`)
return editPostElement;
}; 

$('#messageContainer').on('click', '#editButtonAllPosts', function (event) {
  console.log('button clicked')
  $('#message').append(updatePostModal());
  const postElem = $(this).closest('.col-sm');
  const card = postElem.data('card');
  const postId = card._id;
  const hiddenId = {
  hiddenId: $('#hiddenId').val(postId)  
  }
  const postData = {
  title: $('#createPostTitle').val(card.title),
  description: $('#createPostDescription').val(card.description),
  price: $('#createPostPrice').val(card.price),
  location: $('#createPostLocation').val(card.location),
  willDeliver: $('#createPostWillDeliver').val(card.willDeliver)
  }
});

note: "#message" is the header div, "messageContainer" is the body div.

question from:https://stackoverflow.com/questions/65546718/bootstrap-modal-is-not-triggered-when-button-is-clicked-jquery

Answer 1

I have a small example

const updatePostModal = (myPost) => {
  const editPostElement = $(`
  <div class="modal" id="editPostModal" aria-hidden="true">  
  <form class="editPostForm">  
  <div class="card" style="width: 35rem;">
  <div class="card-body-createPost">
  <h3 id="titleAlert">Edit Post</h5>
  <div class="mb-3">
  <label for="createPostTitle">Title</label>
  <input type="text" class="form-control" placeholder="required" id="createPostTitle" required>
  </div>
  
  <div class="mb-3">
  <label for="createPostDescription">Description</label>
  <textarea type="text" class="form-control" placeholder="required" id="createPostDescription" required></textarea>
  </div>
  
  <div class="mb-3">
  <label for="createPostPrice">Price</label>
  <input type="text" class="form-control" placeholder="required" id="createPostPrice" required>
  </div>
  
  <div class="mb-3">
  <label for="createPostLocation">Location</label>
  <input type="text" class="form-control" placeholder="optional" id="createPostLocation">
  </div>
  
  <div class="mb-3">
  <label for="createPostWillDeliver">Will Deliver</label>
  <input type="checkbox" class="form-control" id="createPostWillDeliver">
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal" id="editPostCloseButton">Close</button> 
    <button type="button" class="btn btn-lg btn-primary" id="editPostSubmitButton">Submit</button>
  </div>
  <input hidden type="text" id="hiddenId"></input>
  </div>
  </div>
  </form>
  </div>`)
  return editPostElement;
};

$('#editButtonAllPosts ').on('click', function(event) {
  console.log('button clicked');
  const modal = updatePostModal();
  $('#message').append(modal);
  modal.show();
});

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"></script>
</head>

<body>
  <button type="button" id="editButtonAllPosts">Edit</button>
  <div id="message">
  </div>
</body>