將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事件綁定到列表中的每個項目並在事件中傳遞該項目的值

回答

相關問題