jquery 和 bootstrap 按钮事件不起作用

Question

我有按钮点击事件监听器的问题

这是hanghoa.js

$(function(){
    $("#addButton").on('click',function(){
        console.log('addButton clicked');
    })
//above show console work on click

$(function(){
    $("#addFormModal").on('keydown','input',function(event){});//this one also work when modal open

    $('#addModal').on('shown_bs_modal',function(event){
        $('#saveModalButton').on('click',function(){
            console.log(success,'added and the constant in which we are saving');
            console.log('something bad happen');}
            );
        });
        $("#addModal").on('click','#saveModalButton',()=>{
            console.log('saveModalButton clicked');
        })
//both of the above not working when modal load, the click doesnot register when click

下面是 bootstrap 模态

的脚本

<div id="addModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Th&#xEA;m m&#x1ED9;t m&#x1EE5;c m&#x1EDB;i</h4>
            </div>
            <div class="modal-body">
                <form id="addFormModal" method="Post">
                    <input type="text" name="nameProBangHHModal" data-index="1" >T&#xEA;n Nh&#xE3;n, Quy C&#xE1;ch</input>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" name="saveModalButton" data-bs-dismiss="modal">L&#x1B0;u v&#xE0; th&#xEA;m</button>
            </div>
        </div>
    </div>
</div>

下面是页面脚本

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/banghanghoa.css">
</head>

<div class="tableDK">
    <button id="addButton" type="button" class="btn btn-outline-primary" data-bs-target="#addModal" data-bs-toggle="modal">Th&#xEA;m</button>
    <button id="editButton" type="button" class="btn btn-outline-info">&#x110;i&#x1EC1;u ch&#x1EC9;nh </button>
    <button id="refreshButton" type="button" class="btn btn-outline-info">L&#xE0;m m&#x1EDB;i (F5)</button>
    <button id="deleteButton" type="button" class="btn btn-outline-danger ">X&#xF3;a</button>


    <div id="coursemodal">
        <%- include ('../nhapxuat/_nhapxuatModal.ejs') %>
    </div>
</div>
</div>

<footer>
    <script type="text/javascript" src="/js/hanghoa.js"></script>
</footer>

这是图像，我希望单击时红色圆圈上的按钮显示“saveModalButton ....”，但 none 以上工作。我试图搜索其他主题，但它根本不起作用，我不知道为什么。感谢您的关注。

Answer 1

您忘记在按钮上输入 ID：

<button type="submit" id="saveModalButton" name="saveModalButton" data-bs-dismiss="modal">L&#x1B0;u v&#xE0; th&#xEA;m</button>

因为你调用了 $('#saveModalButton').on('click',function(){})

# 是 id 而不是 name

jquery 和 bootstrap 按钮事件不起作用

jquery and bootstrap button event does not work

javascript

jquery

bootstrap-modal