时间戳

首页 > 解决方案 > JQuery：在点击处理时将多个模式分开

javascript - JQuery：在点击处理时将多个模式分开

问题描述

我是 Javasript 和 JQuery 的新手（使用它 2 天），我在处理模态按钮上的单击功能时遇到问题。

我在我的页面上生成用于查看帖子评论的模式，并且有一个按钮可以在模式上提交评论，但是当我创建一个 onclick 函数并单击该按钮时，该函数会为每个帖子触发一次。

我不知道如何分别处理它们。

在这种情况下，alert("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>

点击功能

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

一个帖子的模态

标签： javascriptphpjqueryhtmlbootstrap-modal

解决方案

这是因为您对所有这些都使用相同的 id。为了解决这个问题，你可以给他们一个通用的类和每个项目的特定 id。因此，你可以做这样的事情：

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

推荐阅读