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

Question

这似乎很简单，但可能我遗漏了一些东西。我尝试绑定(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 文本填充了一个临时数组并绑定(bind)了包含纯文本值的列表。 ondblclick 事件仅出现在列表的第一项中。 我希望我能够解释我的问题。 :)

更新

在浏览器中输入 $('#listComments')

[select#listComments.classComments, context: document, selector: "#listComments"] 0 : select#listComments.classComments context : document length : 1 selector : "#listComments" proto : Object(0)

$('#listComments').长度为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].长度为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] });
                };
            });

回答

尽管穆罕默德-优素福也给出了正确的解决方案，但我只能将其中一个答案标记为正确。我还提到了this邮政。这样做了......并感谢卢克的持续支持。

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

Answer 1

所以我只是正确地阅读了您的代码，并注意到您正在尝试将双击事件连接到选择中的选项，我不相信这会按照您期望的方式工作。尝试循环选择选项并将每个值设置为正确的索引，然后将 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] });
}