Search code examples
javascriptjquerybootstrap-modal

jquery and bootstrap button event does not work

i have problems with the button click eventlistener

this is the 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

bellow is the script for bootstrap modal

<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>

bellow is the page script

<!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>

here is the image, i expected the button on the red circle when click show "saveModalButton ...." but none of the above work. i tried to search for other topic but it not work at all and i don't know why. Thank you for your attention. button in red

Solution

  • You forget to give id on your button:

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

    because u call $('#saveModalButton').on('click',function(){})

    # is for id not name