テーブルの行に複数のモーダル

Question

私は3つのモーダルでテーブルを作成しようとしましたが、同じ行に2つのボタンがあり、削除と各モーダルを開く詳細があり、行全体が編集モーダルを開く別のボタンです。

問題は次のとおりです。削除または表示ボタンをクリックすると2モーダルを開き、モーダルを編集してモーダルを削除します。

例：私は、行上の[OK]をクリックしますが、私はボタンの編集をクリックするか、削除すると、このオープン2モーダル、モーダル削除OUの詳細にわたる常に編集モーダル滞在

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

<!--Modal Edit--> 
<div class="modal" id="modalEdit"> 
    Edit informations 
</div> 

<!--Modal Details-->  
<div class="modal" id="modalDetails"> 
    Details informations 
</div> 

<!--Modal Delete-->  
<div class="modal" id="modalDelete"> 
    Delete informations 
</div> 

。

誰かがこの問題を私に助けてくれますか？テーブル構造に続き

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>