Question

模态上的提交按钮有一个名为“btn.btn-success”的类，因此我试图让按钮收集我插入模态的值，并最终将它们附加到帖子的底部。我对这部分的解决方案看起来像这样

    $(".btn.btn-success").on("click", function (e) {
        e.preventDefault;
        var title = $('#titlereply').val();
        var email = $('#emailreply').val();
        var comment = $('#commentreply').val();
        var replyFormat = '<div class="comment-content media-body clearfix">'
                    + '<h3 class="media-heading">' + title + '</h3> <div class="comment-meta">By <a href="#">' + email
                    + '</a> | Today, 12:31</div> <div class="comment-body"> <p>'
                    + comment + ' <a href="#" class="btn btn-gray more reply" id="replyComment2">Reply</a></div>';

        $(sabio.page.replyRef).closest('.comment-content').append(replyFormat);
    });

我已经尝试在运行解决方案时发出警报和中断，并且出于某种原因，它不会超过点击部分，它会显示e.preventDefault;所以一定有问题，但我找不到。我绝对相信“btn.btn-success”这个类是指模态的提交按钮。但是，以防它可能有助于这是模态的脚本

感谢您的时间和帮助。

Answer 1

更新：这是JS对象：

jQuery( document ).ready( function( $ )
{
    $.buttonManager = {
        manage: function(element, appendist) {
            $(element).on("click", function (e) {
            e.preventDefault();
            var title = $('#titlereply').val();
            var email = $('#emailreply').val();
            var comment = $('#commentreply').val();
            var replyFormat = '<div class="comment-content media-body clearfix">' + '<h3 class="media-heading">' + title + '</h3> <div class="comment-meta">By <a href="#">' + email + '</a> | Today, 12:31</div> <div class="comment-body"> <p>' + comment + ' <a href="#" class="btn btn-gray more reply" id="replyComment2">Reply</a></div>';
            $(appendist).find('.comment-content').append(replyFormat);
        });
        }
    }
});

表单的HTML：

<html>
    <head>
        <title>
            Test Form
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <form action="/index.html">
            <input type="text" id="titlereply" placeholder="Title" />
            <input type="text" id="emailreply" placeholder="Email" />
            <input type="text" id="commentreply" placeholder="Comment" />
            <button class="btn" id="myButton">Submit</button>
        </form>

        <div id="result">
            <div class="comment-content">

            </div>
        </div>
    </body>
    <script>
        $(function() {
           $.buttonManager.manage('.btn', '#result'); 
        });
    </script>

</html>

请注意如何让按钮按照您想要的方式运行：

$.buttonManager.manage('.btn', '#result');

哪里＆＃39; .btn＆＃39;是标识按钮的元素，＆＃39;＃results＆＃39;是查找要追加的评论内容的元素。

工作示例：http://sb.meezaan.net/so/33571486/

老答案：对于按钮，请使用：

<input type="button" id="myButton" value="Submit Reply" class="btn btn-success" data-formid="#comment-form-reply">

对于JQuery，请使用：

$("#myButton").on("click", function (e) {
    e.preventDefault();
    var title = $('#titlereply').val();
    var email = $('#emailreply').val();
    var comment = $('#commentreply').val();
    var replyFormat = '<div class="comment-content media-body clearfix">'
                + '<h3 class="media-heading">' + title + '</h3> <div class="comment-meta">By <a href="#">' + email
                + '</a> | Today, 12:31</div> <div class="comment-body"> <p>'
                + comment + ' <a href="#" class="btn btn-gray more reply" id="replyComment2">Reply</a></div>';

    $(sabio.page.replyRef).closest('.comment-content').append(replyFormat);
});

Modal上的提交按钮不会提交

1 个答案: