jquery and bootstrap button event does not work

Question

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.

The HTML page you have shown does not include your modal HTML? Is it included in the `.ejs` file? Selectors will only match elements that exist *at page load*. If you generate and insert elements later (with JS, AJAX, etc), event handlers defined at page load will not match them. See See https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery, https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements, [*Direct and delegated event handlers*](https://api.jquery.com/on/#direct-and-delegated-events). — Don't Panic, May 27 '22 at 05:39
@Don'tPanic sorry; it is include in the bootstrap modal on this line "
<%- include ('../nhapxuat/_nhapxuatModal.ejs') %> " the ejs one. already check your helping topic , on the prefer and good one answer have this "$(selector).live( eventName, function(){} ); and he sugges use "on" because of depreceated. and other suggest is "$(staticAncestors).on(eventName, dynamicChild, function() {});" so in my code is the staticAncestors prefer to the ((
<%- include ('../nhapxuat/_nhapxuatModal.ejs') %> )) => id of div block one?. — anh phan, May 27 '22 at 09:22
Yes, you're on the right track. Try something like `$('#coursemodal').on('click', '#saveModalButton', function () { console.log("saveModalButton clicked!"); });`, for all your events. — Don't Panic, May 27 '22 at 11:02
@Don'tPanic i tried your suggestion but unfortunately the event still not register. one question, the button on the modal when i click it it dismiss the modal so does it interact with the script itself ? — anh phan, May 28 '22 at 07:43
Don't define the `#saveModalButton` event handler *inside* the `#addModal` handler (or generally any event handler inside another). 1) they aren't defined if the containing handler never fires (which is maybe a problem now); 2) they are added every time the handler does fire, and they add up on top of the ones already added, so you will end up with 2x handlers if you open the modal 2x. — Don't Panic, May 28 '22 at 08:03
@Don'tPanic after i read the last answer i really that in the button it is the "name" not the "id". Thank you for your time. — anh phan, May 28 '22 at 08:06
I see, glad you solved it. Since this was a simple typo which is not likely to help future visitors, I'm voting to close as a typo. — Don't Panic, May 28 '22 at 08:09

score 1 · Accepted Answer · edited Jun 03 '22 at 12:50

1

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

edited Jun 03 '22 at 12:50

Don't Panic

13,965
5
32
51

answered May 27 '22 at 10:32

GRACIELA FAUSTEN NOVINDRI

46
4

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 27 '22 at 15:21
oh thank you. I just laugh so hard. Ya it is not the id. I forget that common on the selector. Thought it is about the dynamic and variable scope and life. THank you for your time. – anh phan May 28 '22 at 08:13

jquery and bootstrap button event does not work

1 Answers1