Question

好的我认为这可能是一个错误或其他东西，但无法弄明白。我有一个有一行三列的表，第一个单元格有一个带有跨度的标签，第二个单元格有一个带有选择元素的空跨度，最后一个只有一个跨度。

<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();

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

您可以通过单击标签内的范围或编辑范围来隐藏范围并显示选择元素。每个都有自己的执行功能。首先是单击标签内的跨度时执行的revealSiblingEdit函数。它的作用是将包含目标的事件（对触发事件的元素的引用）传递给函数。在那里我使用它来查找包含select元素的span，该span具有属性data-role='listbox'，我还在单元格内找到与select元素同名的span，以及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元素。它首先检查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();
    }
}

}

现在问题就在于此。当我点击标签中的click me span时，会触发open事件，但是当我点击编辑范围时，它不会触发open事件。如果我通过单击标签中的范围进入编辑模式，则通过单击编辑范围退出编辑模式，它不会触发打开事件，但如果我通过单击编辑范围转到编辑模式通过单击标签中的范围来激活打开事件，从而退出编辑模式。这导致一个问题，因为某些原因导致它开火事件也导致下拉列表的列表出现在右上角。我不知道为什么这样做，但是当我输入这个时，我能够找出导致它的原因。显然它不喜欢我的跨度在标签内的事实，一旦我只有标签本身开放事件停止发射并且下拉列表停止出现。有人知道为什么它不喜欢标签内的跨度？因为在使用kendoUI小部件之前，它工作得很好。

Kendoui DropdownList触发打开事件（使用相同的代码）

0 个答案: