bootstrap Modal不起作用

Boostrap Modal doesn't work

本文关键字：不起作用 Modal bootstrap      更新时间：2023-09-26

你好，我希望你能帮助我解决我现在遇到的问题。

我试图在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"

当你点击span图标时，会触发模态并显示如下:

点击编辑或删除按钮查看页面

<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"); 
  });
});

如果我理解正确的话，你必须委派点击事件试试这样做:

你的按钮需要一些调整-因为我没有看到数据切换和数据目标的理由

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

之后-在你的JS代码中:

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

在按钮上运行警报，而不是在模式上运行

 <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
         }
    });
相关文章：