Question

我尝试用3个模态创建一个表，在同一行我有2个按钮，删除和将打开每个模态的细节，整行是另一个按钮，它将打开编辑模式。

问题是：当我点击删除或查看按钮时，打开2模态，编辑模态和删除模态。

示例：

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));

当我点击行时，确定，但是当我点击按钮编辑或删除时，这个打开2模态，总是编辑模式停留在删除ou详细模态。

有人可以帮我解决这个问题吗？

Answer 1

问题是因为您的delete和details按钮位于tr内，点按该按钮会冒泡到顶部并触发row点击事件。要解决此问题，您应该在按钮点击时阻止event propagation。您必须删除data attributes才能实现此目的。

<强> HTML

<td data-toggle="modal" id="deleteBtn">Delete Button</td>

<强>的JavaScript

$("#deleteBtn").on("click", function(event){
   event.stopPropagation();
   $("#modalDelete").modal("show");
});

同样适用于细节按钮。您可以在此处阅读有关事件传播的更多信息 https://www.w3schools.com/jquery/event_stoppropagation.asp

Answer 2

以下表格结构将解决您的问题

<tr>
 <td data-toggle="modal" data-target="#modalDelete">Delete Button</td>
 <td data-toggle="modal" data-target="#modalDetails">Details Button</td>
 <td data-toggle="modal" data-target="#modalEdit">Edit Button</td>
 <td>Id</td>
 <td>Name</td>
 <td>Description</td>
 <td>Price</td>
</tr>

表行上的多个模态

2 个答案: