將對象的 Data-id 傳遞給 Bootstrap Modal 表單

Question

再會。

我有一個任務列表，其中在任務字段中有一個用於管理任務的刪除按鈕。
我正在尋找如何將包含 ID（按下刪除按鈕后）的任務參數傳遞給 Bootstrap 模式。

---

我的目標是單擊任務上的“垃圾箱”圖標並顯示模態，並且僅在模態中確認刪除。

這是用模態包裝的按鈕

`<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
              <a data-toggle="modal" data-target="#deleteTaskModal">
                <button class="deleteTask far fa-trash-alt" data-id='{id}'></button>
              </a></span>`

這是模態本身。

我想使用模態來確認刪除任務。

<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form class="" action="" method="">
          <div class="modal-header">
          </div>
          <div class="modal-body">
            <h3>Do you want to delete this task?</h3>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Delete Task</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  </div>

這是 Jquery 腳本

我試圖捕捉“觸發器”的 ID 並將其傳遞給 Modal

$(".modal fade #deleteTaskModal").on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget) //Button that triggered the modal
    var id = button.data('id');
    var url = '/delete/' + id;
    if (confirm('Delete task')) {
      $.ajax({
        url: url,
        type: "DELETE",
        success: function(result) {
          console.log("Deleting task...");
          window.location.href = '/';
        },
        error: function(err) {
          console.log(err);
        }
      })
    }
  }

Answer 1

盡管您沒有在模態打開中targeting正確的element ，但您幾乎就在那里。

既然你有a元素， button是里面a包含了data-id

您需要注意eventTarget ，然后使用.find()方法查找按鈕並從中獲取將通過ajax傳遞的數據 ID

var id = button.find('button').data('id') //need to find the button and get id

此外，您還需要一個事件處理程序，它將在您的模態open click函數，當您單擊模態中的“刪除任務”按鈕時將觸發該事件處理程序。

最后，我還添加了一個模態close選項，它會在 ajax 成功時發生 - 我已經修復了您的code並且正在按預期工作。

實時工作演示：（在 console.log 中顯示數據 ID 並單擊按鈕工作）

 $("#deleteTaskModal").on('show.bs.modal', function(event) { var button = $(event.relatedTarget) //Button that triggered the modal var id = button.find('button').data('id') //need to find the button and get id var url = '/delete/' + id; //url console.log('data-id= ' + id) //15 //Click delete task in modal $(document).on('click', '.delete_task', function() { if (confirm('Delete task')) { $.ajax({ url: url, type: "DELETE", success: function(result) { $('#deleteTaskModal').modal('hide') //hide modal on success console.log("Deleting task..."); window.location.href = '/'; }, error: function(err) { console.log(err); } }) } }) })

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <span data-toggle="tooltip" data-placement="bottom" title="Delete task"> <a data-toggle="modal" data-target="#deleteTaskModal"> <button class="deleteTask fas fa-trash-alt" data-id='15'></button> </a> </span> <div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form class="" action="" method=""> <div class="modal-header"> </div> <div class="modal-body"> <h3>Do you want to delete this task?</h3> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary delete_task">Delete Task</button> </div> </form> </div> </div> </div> </div>