CODEWITHSUNDEEP
javascriptphpjqueryhtmlbootstrap-modal
MatyZ
MatyZ

Reputation: 23

JQuery: Multiple modals separate on click handling

I am new to Javasript and JQuery (working with it for 2days) and I have problem with handling on click functions on modal button.

I generate modal for viewing post comments on my page and there is a button to submit comment on the modal, but when I create an onclick function and click the button, the function fires one time for every post.

I don't know how to handle them separately.

In this case, the alert("GO") is fired 12 times, because there are 12 posts. I need it to only fire 1 time

Creating modals

function showComments(res) {
    $('.modal').modal("show")
    $('#modal-username').text(res[0].PostUsername)
    $('#modal-post').text(res[0].PostBody)
    var comments = ""
    for (var i = 0; i < res.length; i++) {
        comments += '<div><h6 class="m-0"><a href="#" class="text-primary">' + res[i].CommentUsername + '</a></h6><p class="m-0 mb-1">' + res[i].CommentBody + '</p><hr class="m-0"></div>';
    }
    $('.modal-body').html(comments)
    $('.modal-footer').html('<input id="modal-comment-text" placeholder="Type comment " type="text" class="w-100" required="required"> <button type="button" id="modal-comment-submit" data-comment-submit="' + res[0].PostId +
                    '" class="btn btn-secondary">Post</button>')
}

Modal HTML

<div class="modal fade text-dark">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header d-flex flex-column">
                <div class="d-inline-flex w-100">
                    <h5><a class="text-primary" href="#" id="modal-username">Username</a></h5> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button>
                </div>
                <p class="postmodal m-0 mx-1" id="modal-post"> This is post bla bla bla </p>
            </div>
            <div class="modal-body">
                <div>
                    <h6 class="m-0"><a href="#" class="text-primary">Username</a></h6>
                    <p class="m-0 mb-1">First comment</p>
                    <hr class="m-0">
                </div>
            </div>
            <div class="modal-footer"> 
                <input id="modal-comment-text" placeholder="Type comment here" type="text" class="w-100" required="required"> <button type="button" id="modal-comment-submit" class="btn btn-secondary">Post</button>
            </div>
        </div>
    </div>
</div>

Onclick function

$(document).on("click", "#modal-comment-submit", function(){
    alert( "GO" ); 
});

Modal for one post

Upvotes: 1

Views: 454

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28414

This is because you are using the same id for all of them. To solve this issue, you can give them a common class and a specific id for every item. Therefore, you can make something like this:

$(".modal-comment-submit").click(function(event){
    alert("Post of id " + event.target.id + " was clicked");
});

Upvotes: 1

Related Questions