javascript - 将ondblclick事件绑定(bind)到列表中的每个项目，并在事件中传递该项目的值

这似乎很简单，但可能我缺少一些东西。我尝试将每个项目的ondblclick事件绑定到列表中，并将其值传递给编辑器，以便单击该项目时，其文本会在编辑器中合并。由于某些原因，即使我单击第二个或第三个项目，也只有第一个项目会继续追加到编辑器文本中。

$('#listComments').each(function (index, item) {
  $('#listComments')[0][i].ondblclick = function () {
                    alert(i);
                    var editor = $("#editor").data("kendoEditor");
                    editor.exec("inserthtml", { value: commentSet[i] });
                };

commentsSet是另一个临时数组，其中填充了原始值，如下所示

 var commentsSet = [];

 $.ajax({
        url: urlComments,
        data: { headerId: $('#ddlCommentHeaders').val().toString() },
        dataType: "json",
        success: function (result) {
            $('#listComments').empty();
            commentSet = [];

            $.each(result, function (index, value) {
                commentSet[index] = value.comment;
                $('#listComments').append($('<option>').text($(value.comment).text()).val(value.CommentID));
           });



            for (var i = 0; i < $('#listComments')[0].length; i++) {
                $('#listComments')[0][i].ondblclick = function () {
                    alert(i);
                    var editor = $("#editor").data("kendoEditor");
                    editor.exec("inserthtml", { value: commentSet[i] });
                };
            }

        }
    });

基本上value.comment有一个带有html标记的文本，我需要在编辑器中显示，但要显示在列表项中，我只需要不带html标记的纯文本，所以我用html文本填充了一个临时数组，并用纯文本绑定了列表文字值。
ondblclick事件仅出现在列表的第一项中。
我希望我能解释我的问题。 :)

更新

在浏览器中输入$（'＃listComments'）


  [select＃listComments.classComments，上下文：文档，选择器：
  “ #listComments”] 0：select＃listComments.classComments上下文：
  文档长度：1个选择器：“＃listComments”
  原型：Object（0）


$（'＃listComments'）。length为1

$（'＃listComments'）[0]

<select class="classComments" id="listComments" multiple="multiple" name="cM.CommentsList" style="height:105px; margin-bottom:5px; max-width:100%;"><option value="1382" style="white-space: pre-wrap;">This is a Math Comment</option><option value="1383">This is a second Comment</option></select>

$（'＃listComments'）[0] .length为2

的HTML

<div style="margin-left:5px;  width:80%" class=" col-xs-9">
                        @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:105px; margin-bottom:5px; max-width:100%;", @class="classComments" })
                    </div>

jQuery的每个功能

$('#listComments').each(function (index, item) {
                item.ondblclick = function () {
                    alert(index);
                    editor.exec("inserthtml", { value: commentSet[index] });
                };
            });

回答

尽管穆罕默德·优素福（Muhammad-Yousuf）都给出了正确的解决方案，但我只能将其中一个答案标记为正确。我还提到了this帖子。这样做是..并且感谢卢克的一贯支持。

 $('#listComments').dblclick(function (){
                $("#listComments option:selected").each(function () {
                    var index = $(this).index();
                    var editor = $("#editor").data("kendoEditor");
                    editor.exec("inserthtml", { value: commentSet[index] });
                });
            });

最佳答案

因此，我只是正确地阅读了您的代码，并注意到您正在尝试将双击事件关联到一个选择中的选项，我认为这不会按您期望的那样起作用。尝试遍历selects选项并将每个值设置为正确的索引，然后将onchange事件连接到commentList，在该事件中获取当前值（索引），并使用该值从数组中获取正确的项。

就像是

$('#listComments option').each(item, index) {
    $(item).data('index', index);
}

$('#listComments')[0].dblclick = function() {
    var index = $('#listComments option:selected').data('index');
    alert(index);
    var editor = $("#editor").data("kendoEditor");
    editor.exec("inserthtml", { value: commentSet[index] });
}