bootstrap 单击按钮时不触发模式 - jQuery

Question

我尝试在 div 中显示来自单击处理程序的 bootstrap 弹出模式。我尝试了很多不同的方法，但到目前为止 none 的方法都有效，希望能提供一些帮助。我能够从 header 中的 link 触发模态，但不知何故，相同的逻辑不适用于 body.Screenshot here

期望的行为：点击卡片中的“编辑”，我触发了一个模式来更新我的 post。

代码：

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)
  }
});

注意：“#message”是 header div，“messageContainer”是 body div.

Answer 1

因为您只是附加 HTML MODAL 的内容而不触发它。

在 $('#message').append(updatePostModal()); 附加内容之后。试试这个：

$('#editPostModal').modal('show');

Answer 2

我有一个小例子

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>

bootstrap 单击按钮时不触发模式 - jQuery

bootstrap modal is not triggered when button is clicked - jQuery

jquery

onclick

bootstrap-modal