如何解决提到的Inputs插件在cshtml视图中的两个地方使用时不起作用

Question

我有一个注释部分，在这里我结合使用了ockoutoutjs和一个名为jquery.mentionsInput的插件，以在注释中提及其他人并通知他们。对此进行完美评论时，您可以看到人员列表，他们会收到通知。但是如果您单击它，我还会显示一个“答复”按钮。注释时的结构相同，文本区域相同，依此类推。但是这里提到的脚本根本没有触发。

我尝试在提及脚本中创建相同方法的重复项，只是更改方法的名称，然后将它们指向其他类，例如：原始脚本指向'$（'textarea.mention'），答复textarea指向'$（'textarea.mention-reply'）但没有骰子。

我已经尝试创建两个插件脚本和CSS的副本，将其中的每个'mentionsInput'和'mention'类替换为'replyInput'和'reply'类。没有骰子。

回复文本区域隐藏在模板中，如果您单击'回复'，我将显示该模板，我尝试将其移出模板，并将其直接添加到html结构中。没有骰子..

问题是，如果我将原始textarea.mention更改为textarea.mention-reply，而在另一个textarea中没有任何其他类，则它可以正常工作。这样可以确认插件的副本正在工作。他们似乎无法同时/以相同的视角工作？

原始脚本：

$(function () {

    $('textarea.mention').mentionsInput({
        onDataRequest: function (mode, query, callback) {

            $.when($.getJSON("/search/PeopleMention", { searchTerm: query }))
                .done(function (dataUsers) {
                    data = $.map(dataUsers.users,
                        function (item) {
                            return {
                                'id': item.id,
                                'name': '@' + item.firstname + ' ' + item.lastname,
                                'display': item.firstname + ' ' + item.lastname,
                                'avatar': item.image,
                                'type': 'contact',
                                'link': '/Info/Profilsida/?CurrentUser=' + item.id
                            };
                        });
                    data = _.filter(data, function (item) { return item.display.toLowerCase().indexOf(query.toLowerCase()) > -1 });
                    callback.call(this, data);
                });
        }
    });


    $('.comment-button').click(function () {
        $('textarea.mention').mentionsInput('getMentions', function (data) {
            var ids = "";
            var names = "";
            $.each(data,
                function (i) {
                    names += this.name + ';';
                    ids += this.id + ';';
                });
            $('.names-container').text(names);
            $('.notification-container').text(ids);
        });
    });
});
该副本看起来完全相同，但具有：
$('textarea.mention-reply').mentionsReply .... 

$('.mentions-reply-button').click .... 
Knockoutjs脚本的相关部分：
function CommentsModel() {
    var that = this;

    that.replyToId = ko.observable(0);
    that.newCommentText = ko.observable();
    that.comments = ko.observableArray();

    that.updateComments = function (comments) {
        that.comments(that.sortComments(comments));
    };

    that.addComment = function () {

        var mentionsArray = matchMentionsWithNamesInPostComment();
        var encodedCommentText = '';

        if (mentionsArray.length > 0) {
            that.newCommentText(addLinksToMentionsInComment(that.newCommentText(), mentionsArray));
            encodedCommentText = encodeURIComponent(that.newCommentText());
        }

        var mentions = $('.notification-container').text();
        $.ajax({
            url: '/socialfunctions/addcomment/',
            type: 'POST',
            data: { id: $('#CurrentPageId').val(), comment: encodedCommentText == '' ? that.newCommentText() : encodedCommentText, mentions: mentions ,parentId: that.replyToId() }
        })
            .done(function (result) {
                    ........
            });
    };

    that.post = function() {
        setTimeout(function () {
            that.addComment();
        }, 500);
    };


    that.clickedReply = function (comment) {
        if (that.replyToId() === 0 || that.replyToId() !== comment.Id) {
            that.replyToId(comment.Id);
        } else {
            that.cancelReply();
        }
    };

    that.cancelReply = function () {
        that.replyToId(0);
        that.newCommentText('');
    };

    that.deleteComment = function (comment) {
            .....
    };
}
视图：
    var clientResources = ServiceLocator.Current.GetInstance<IRequiredClientResourceList>();
    clientResources.RequireStyle("\\Static\\css\\jquery.mentionsInput.css").AtHeader();
    clientResources.RequireStyle("\\Static\\css\\jquery.mentionsReply.css").AtHeader();
    clientResources.RequireScript("\\Scripts\\site\\underscore-min.js").AtFooter();
    clientResources.RequireScript("\\Scripts\\jQuery\\jquery.elastic.source.js").AtFooter();
    clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsInput.js").AtFooter();
    clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsInputInit.js").AtFooter();
    clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsReply.js").AtFooter();
    clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsReplyInit.js").AtFooter();

    <div id="comments">
        <div class="clearfix">
            <div class="form-group">

                <h4>Kommentera</h4>
                <p class="infotext">Please write a comment</p>
                <textarea data-bind="visible: replyToId() == 0, textInput:newCommentText" class="mention form-control fullwidth" maxlength="4000"></textarea>
            </div>
            <div class="button-div">
                <span style="display: none;" class="notification-container"></span>
                <span style="display: none;" class="names-container"></span>
                <a href="/" data-bind="visible: replyToId() == 0, click:post" class="comment-button button">Send</a>
            </div>
        </div>
        <script type="text/html" id="reply-template">
            <div class="clearfix" data-bind="visible:$root.replyToId() == Id">
                <div class="form-group">
                    <h5>Svara <span data-bind="text: UserFullName"></span></h5>
                    <textarea data-bind="textInput:$root.newCommentText" class="mention-reply form-control fullwidth" maxlength="4000"></textarea>
                </div>
                <div class="button-div">
                    <a href="/" data-bind="click:$root.post" class="mentions-reply-button button">Send</a>
                    <a href="/" data-bind="click:$root.cancelReply" class="button">Cancel</a>
                </div>
            </div>
        </script>
        <div data-bind="visible:comments() == undefined || comments().length == 0">
            Right now there are no comments. Be the first to comment!
        </div>

        <div data-bind="foreach:comments">
            <div class="comment clearfix" data-bind="css: { reply: ParentId > 0 }">
                <div class="info">
                    <a data-bind="text:UserFullName, attr:{href:UserProfilePageLink}"></a>
                    <span class="date" data-bind="text: moment(CreateDate).format('YYYY-MM-DD')"></span>
                    <a class="reply-button pull-right" data-bind="visible: ParentId == 0, click: $parent.clickedReply">Reply</a>
                </div>
                <div data-bind="html:Comment, attr: { 'id': Id }"></div>
                @if (EPiServer.Security.PrincipalInfo.HasAdminAccess)
                {
                    <a href="#" class="button remove pull-right" data-bind="click:$parent.deleteComment">Remove</a>
                }
                <div class="reply" data-bind="template: { name: 'reply-template', data: $data }"></div>
            </div>
        </div>
    </div>
我希望提及插件在两个文本区域中都可以使用，但是它仅在注释文本区域中有效，而在回复文本区域中不起作用。它永远不会触发。没错没事。同样，脚本的两个版本都在第一个文本区域中起作用，而在答复文本区域中都不起作用。

我有一个注释部分，在这里我结合使用了ockoutoutjs和一个名为jquery.mentionsInput的插件，以在注释中提及其他人并通知他们。评论时可以使用...

Answer 1

我在这里找到答案：

JQuery: Selecting dynamically created elements and pushing to Firebase