单击按钮时不会触发引导模式 - jQuery答案

【问题标题】：bootstrap modal is not triggered when button is clicked - jQuery单击按钮时不会触发引导模式 - jQuery
【发布时间】：2021-01-03 04:45:30
【问题描述】：

我尝试从 div 中的单击处理程序显示引导弹出模式。我尝试了许多不同的方法，但到目前为止都没有奏效，我们将不胜感激。我可以从标题中的链接触发模式，但不知何故，相同的逻辑不适用于正文。Screenshot here

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

代码：

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。

【问题讨论】：

您是否在控制台中看到“单击按钮”？
我确实在控制台中看到了“单击按钮”。模态虽然不会触发。

标签： jquery onclick bootstrap-modal

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：