JQuery: несколько модалов отдельно при обработке кликов - PullRequest
Новая
       10

JQuery: несколько модалов отдельно при обработке кликов

1 голос
/ 29 марта 2020

Я новичок в Javasript и JQuery (работаю с ним в течение 2 дней), и у меня проблема с обработкой функций нажатия на модальную кнопку.

Я создаю модал для просмотра комментариев к публикации на своей странице, и есть кнопка для отправки комментария к модалу, но когда я создаю функцию onclick и нажимаю кнопку, она запускается один раз для каждого сообщения.

Я не знаю, как обращаться с ними по отдельности.

В этом случае предупреждение ("GO") срабатывает 12 раз, поскольку имеется 12 сообщений. Мне нужно, чтобы он стрелял только 1 раз

Создание модалов 

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>')
}

Модальные 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 

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

Модально для одного поста

1 Ответ

1 голос
/ 29 марта 2020

Это потому, что вы используете один и тот же идентификатор для всех из них. Чтобы решить эту проблему, вы можете дать им общий класс и идентификатор c для каждого элемента. Поэтому вы можете сделать что-то вроде этого: 

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