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

这似乎是直截了当的，但可能我错过了一些东西。我尝试在列表中绑定每个项目的ondblclick事件，并将其值传递给编辑器，以便在单击该项目时将其文本连接到编辑器中。出于某种原因，只有第一项保留追加到编辑文本，甚至当我点击第二或第三项..将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事件仅出现在列表的第一项中。我希望我能够解释我的问题。 :)

UPDATE

在浏览器当i型$（ '＃listComments'）

[选择＃listComments.classComments，上下文：文档，选择器： “#listComments”] 0：选择＃listComments.classComments上下文：文件长度：1个选择器： “#listComments” 原：对象（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] }); 
       }); 
      });

来源

2017-06-14 Samra

先看看.. ID必须是独特的使用类，而不要使用相同的身份证多个元素* –

用.classComments替换所有#listComments ...相同的行为 – Samra

编辑你的HTML与呈现的HTML ..我宁愿不混合jquery与纯js –

所以我只是正确地阅读你的代码，并且注意到你试图将一个双击事件连接到一个选择内的选项，我不相信这会工作如何你期待它。尝试循环选择选项并将每个值设置为正确的索引，然后将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] }); 
}

来源

2017-06-14 01:15:26

但我不需要单击任何东西，但双击 – Samra

结帐我编辑 –

尝试

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

不知道为什么你正在做

$('#listComments')[0].length

如果你的HTML像

<ul id="listComments"> 
    <li>Item</li> 
</ul>

然后你需要

$('#listComments > li').length 
$('#listComments > li').eq(i)

来源

2017-06-14 00:20:11

$（“＃listComments”）。长度返回长度1 only..you可以看到我的标记在更新 – Samra

能否请您包括所呈现标记，而不是 –

它的存在，现在 – Samra

试试这个代码，如果它的作品，我会解释

$.ajax({ 
    url: urlComments, 
    data: { headerId: $('#ddlCommentHeaders').val().toString() }, 
    dataType: "json", 
    success: function (result) { 
     $('#listComments').empty(); 
     $.each(result, function (index, value) { 
      //commentSet[index] = value.comment; 
      $('#listComments').append($('<option>') 
      .text($(value.comment).text()) 
      .val(value.CommentID) 
      .data('comment' , value.comment) 
     }); 
    } 
}); 

$(document).on('dblclick' , '#listComments option', function() { 
    var getComment_Value = $(this).data('comment'); 
    var editor = $("#editor").data("kendoEditor"); 
    editor.exec("inserthtml", { value: getComment_Value }); 
});

来源

2017-06-14 01:29:59

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

回答

相关问题