2

好的，我在想这可能是一个错误或其他东西，但无法弄清楚。我有一个包含一行三列的表格，第一个单元格有一个内部带有跨度的标签，第二个单元格有一个带有选择元素的空跨度，最后一个只有一个跨度。

<table>
<tbody>
    <tr>
        <td>
            <label><span  onclick="revealSiblingEdit(event);">Click Me</span></label>
        </td>
        <td>          
            <span name="select1"></span>
            <select name="Select1" style="display:none">
               <option value="" selected="selected"></option>                
               <option value="1">Yes</option>
               <option value="2">No</option>
            </select>
        </td>
        <td>
            <label><span class='lockButton onclick="editDone(event)">Edit</span></label>
        </td>

选择元素将被隐藏，具有相同名称的跨度将显示被选择的值。加载文档后，我运行此代码，将我的 select elelemnt 更改为 KenndoUI 小部件，并将函数绑定到 open 事件，当用户打开小部件时触发 open 事件。请注意，它也被隐藏了，我正在使用该类.k-widget来查找 kendoui Widget 并将其隐藏。

$("select[name='select1']").kendoDropDownList({
       open: function(e) {
           console.log("maaaannnnnn.......");
       }
    }).closest(".k-widget").hide();

背景信息：使选择元素成为 kendoUI Widget 使其成为跨度的子元素，并且它还有我稍后将使用的兄弟跨度，选择元素仍然存在但隐藏，我们看到的是span 看起来像一个选择元素

您可以通过单击标签内的跨度或编辑跨度来隐藏跨度并显示选择元素。每个都有自己的功能来执行。首先是revealSiblingEdit单击标签内的跨度时执行的函数。它所做的是将包含目标的事件（对触发事件的元素的引用）传递给函数。在那里，我使用它来查找包含 select 元素的 span，该 span 具有属性data-role='listbox'，我还在单元格内找到与 select 元素同名的 span，以及作为 Edit 的 span 元素。然后它调用 showAndHideInput 函数，在调用该函数之后，它会将编辑范围的内容更改为 Edit 或 Done。

function revealSiblingEdit(e) {     
var thisTarget = e.target;    
var theSiblingInput = $(thisTarget).closest("tr").find("span[role='listbox']");             
   var theSiblingSpan = $(thisTarget).closest("tr").find("span[name*='" + theSiblingInput.find("select").attr("name") + "']");
   } 
   var theDoneButton = $(thisTarget).parents("td").siblings().find(".lockButton");     
   showAndHideInput(theSiblingInput, theSiblingSpan, theDoneButton);     

   if ($(theDoneButton).text() == "Edit") {
       $(theDoneButton).text("Done");
   } else {
       $(theDoneButton).text("Edit");
   }

}

通过单击编辑范围，它会执行该功能editDone，该功能与revealSiblingEdit. 唯一的区别是传递给函数的事件已经包含对编辑范围的引用，因此我们不需要找到它。

function editDone(e) {        
var thisTarget = e.target;
var theSiblingInput = $(thisTarget).closest("tr").find("span[role='listbox']");
var theSiblingSpan = $(thisTarget).closest("tr").find("span[name*='" + theSiblingInput.find("select").attr("name") + "']");   
showAndHideInput(theSiblingInput, theSiblingSpan, thisTarget);
if ($(thisTarget).text() == "Edit") {
    $(thisTarget).text("Done");
} else {
    $(thisTarget).text("Edit");
}

}

现在对于两者都调用的 showAndHideInput 函数。它会检查我们所处的“模式”。如果编辑跨度内容是，Edit那么我们将进入编辑模式，并将显示 kendoUI 小部件以用于与 select1 跨度元素交互和隐藏。它首先检查 span 元素中是否有任何内容（如果有则表示之前有一个值，并将 kendoUI 的值设置为该值作为默认值）。如果编辑范围内容已完成，则意味着我们已完成编辑模式。因此，我们将获取用户选择的新值并将 select1 span 元素的内容更改为该值。然后隐藏 KendoUI 小部件并显示跨度。我有一个 for 循环，因为每个单元格中可以有多个 select 和 span 元素。

function showAndHideInput(theInput, theSpan, theBtn) {
console.log(theBtn);
var theData;
var index;
if ($(theBtn).text() == "Edit") {       
    for (index = 0; index < theInput.length; index++) {
        theData = $(theSpan[index]).text();            
        $(theInput[index]).val(theData);
        $(theInput[index]).css('display', 'inline-block');           
        $(theSpan[index]).css('display', 'none');
    }
} else {
    for (index = 0; index < theInput.length; index++) {            
        if ($(theInput[index]).is("span[role='listbox']")) {
            theData = $(theInput[index]).find(".k-input").text();               
        } else if (($(theInput[index]).attr("class") == "CheckBox")) { //check to see if the element is a checkbox element
            //do nothing, check box are not readonly and are automatically editable
        } else {
            theData = $(theInput[index]).val();               
        }
        if ($(theSpan[index]).text() != theData) {                
            $(theSpan[index]).text(theData);               
        }          
        //  $(theInput[index]).css('display', 'none');            
        $(theInput[index]).hide();
        $(theSpan[index]).show();
    }
}

}

现在问题来了。当我单击标签中的单击我跨度时，会触发打开事件，但是当我单击编辑跨度时，它不会触发打开事件。如果我通过单击标签中的范围进入编辑模式然后通过单击编辑范围退出编辑模式它不会触发打开事件，但是如果我通过单击编辑范围进入编辑模式去通过单击标签中的跨度退出编辑模式，它会触发打开事件。这会导致一个问题，因为由于某种原因导致它触发打开事件也会使下拉列表的列表出现在右上角。我不知道它为什么会这样，但是当我输入这个时，我能够找出导致它的原因。显然它不喜欢我的跨度在标签内的事实，一旦我自己有了标签，打开事件就会停止触发并且下拉列表停止出现。有人知道为什么它不喜欢标签内的跨度吗？因为在我使用 kendoUI 小部件之前它工作得非常好。

4

0 回答 0