Boostrap Modal不起作用

Question

您好，希望您能為我解決當前遇到的問題。

我試圖在按下按鈕時使用模式在JS中執行代碼，事實是，具有按鈕的HTML代碼會自行生成

主視圖頁面

<tr class="odd">
<td class=" sorting_1">CU</td>
<td class="">Cliente Unico</td><td class="">101</td>
<td class="">
<span id="edit_CU" class="ui-icon ui-icon-pencil" data-toggle="modal" data-target="#modal_edit"></span>
<span id="delete_CU" class="ui-icon ui-icon-trash" data-toggle="modal" data-target="#modal_delete"></span>
</td>
</tr>

在id =“ edit_CU”中，CU會在生成HTML代碼時發生更改，因此id =“ delete_CU”也不總是相同

當您單擊范圍圖標時，將觸發模態並顯示以下內容：

單擊“編輯”或“刪除”按鈕時查看頁面

<div id="modal_delete" class="modal fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Delete vertical</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete?</p>                 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_delete">Yes</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="<?php echo base_url('assets/js/helper/func_verticales.js');?>"></script>

在此視圖頁面中，當用戶單擊“是”時，詢問用戶是否要刪除其信息，它應該會彈出一條消息……但是它什么也沒做，有人可以幫我忙嗎？

這是JavaScript

 $("#modal_delete").on('show.bs.modal', function(event){
    alert("hello"); 
  });
});

Answer 1

從按鈕而不是模式運行警報

 <button id="modal_delete">Yes</button>

 $("#modal_delete").on('click', function(event){
     alert("hello"); 
   });
 });

或使用確認框

$('#modal_delete').click(function(ev){
        ev.preventDefault();
         var r = confirm("Are you sure?");
         if (r == true) {
            //run delete code here
         }
    });

Answer 2

如果我正確地理解了您，而不是您必須委派click事件，請嘗試如下操作：

您的按鈕需要進行一些調整-因為我看不到數據切換和數據定位的原因

<button type="button" class="btn btn-primary">Yes</button>

之后-在您的JS代碼中：

$("button.btn-primary").on("click","#modal_delete",function()   
{
    alert("hello");
});