剑道UI [下拉列表] - 多个元素中的冲突
Kendo UI [DropDownList] - Conflict in multiple elements
我正在使用带有过滤器搜索的Kendo UI DropDownList元素。
如果用户在下拉列表中搜索并且搜索的项目不可用,我正在显示+ Add
链接...
仅当我有一个<select>
框时,这才按预期工作
感谢@Jonathan
,他在上述:)中提供了帮助
但是如果我有超过 1 个选择框,则会遇到问题
在线演示
jQuery
$(document).ready(function() {
// set up the delay function
var delay = (function(){
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(".selectBox").kendoDropDownList({
filter: "contains"
});
// set up the event handler
$(".k-list-filter input").keyup(function () {
// wait for Kendo to catch up
delay(function () {
// check the number of items in the list and make sure we don't already have an add link
if ($('.k-list-scroller ul > li').length === 0 && !($(".newItem").length)) {
$('.k-list-filter .k-i-search').hide();
$('.k-list-filter').append('<a href="javascript:;" class="newItem">+ Add</a>');
}
// check the number of items in the list
if ($('.k-list-scroller ul > li').length > 0) {
$('.k-list-filter .k-i-search').show();
$('.k-list-filter .newItem').remove();
}
}, 500); // 500 ms delay before running code
});
});
.HTML
<div class="row">
<div class="col-xs-4">
<div class="field">
<select class="selectBox">
<option>-- Select 1 --</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="field">
<select class="selectBox">
<option>-- Select 2 --</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
<option>Sit amet lieu</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="field">
<select class="selectBox">
<option>-- Select 3 --</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
</select>
</div>
</div>
</div>
这是因为所有
3 个下拉列表都呈现了.k-list-scroller
和.k-list-filter
,但是如果您只需要访问当前下拉列表的这些元素,请在事件中使用this
关键字keyup
:
$(".k-list-filter input").keyup(function () {
//"this" represents html input element
var listFilter = $(this).closest('.k-list-filter');
var listScroller = $(this).closest('.k-list-container').find('.k-list-scroller');
// wait for Kendo to catch up
delay(function () {
// check the number of items in the list and make sure we don't already have an add link
if (listScroller.find('ul > li').length === 0 && !listFilter.find(".newItem").length) {
listFilter.find('.k-i-search').hide();
listFilter.append('<a href="javascript:;" class="newItem">+ Add</a>');
}
// check the number of items in the list
if (listScroller.find('ul > li').length > 0) {
listFilter.find('.k-i-search').show();
listFilter.find('.newItem').remove();
}
}, 500); // 500 ms delay before running code
});
有几个原因可以解释为什么你想要实现的目标没有发生。一切都与您在keyup
函数中选择项目的方式有关。我会尽力解释原因:
-
您正在选择带有
k-list-scroller
的所有元素...其中有3个。所以这个表达式的结果$('.k-list-scroller ul > li').length === 0
在给定的上下文中将始终为假
-
这里也发生了同样的情况...
$('.k-list-filter .k-i-search').hide();
当您尝试隐藏放大镜图标时
- 最后但并非最不重要的一点是,当满足上述条件时,您需要延迟内部代码块的执行,因为 kendo/telerik 会操作下拉项并使它们可见,换句话说,一旦您隐藏搜索图标 telerik 就会立即显示它。
这是一个工作代码片段...
$(document).ready(function() {
// set up the delay function
var delay = (function(){
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(".selectBox").kendoDropDownList({
filter: "contains"
});
// set up the event handler
$(".k-list-filter input").keyup(function () {
var self = this;
// wait for Kendo to catch up
delay(function () {
// check the number of items in the list and make sure we don't already have an add link
var itemsFound = $(self).parents('.k-list-container').find(".k-list-scroller ul > li").length;
if (itemsFound === 0 && !($(".newItem").length)) {
console.log("Adding new");
setTimeout(function(){
$(self).parents('.k-list-container').find('.k-list-filter .k-i-search').hide();
$(self).parents('.k-list-container').find('.k-list-filter').append('<a href="javascript:;" class="newItem">+ Add</a>');
}, 50);
}
// check the number of items in the list
if ($('.k-list-scroller ul > li').length > 0) {
$('.k-list-filter .k-i-search').show();
$('.k-list-filter .newItem').remove();
}
}, 500); // 500 ms delay before running code
});
});
body{font-family:Verdana;font-size:12px;margin:50px 10px;}
.k-header{border:1px solid #ccc;background:#fff;}
.newItem{position:absolute;top:8px;right:10px;}
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css"/>
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css"/>
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="field">
<select class="selectBox">
<option>-- Select 1 --</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="field">
<select class="selectBox">
<option>-- Select 2 --</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
<option>Sit amet lieu</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="field">
<select class="selectBox">
<option>-- Select 3 --</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
</select>
</div>
</div>
</div>
相关文章:
- 未捕获错误:不变冲突:元素类型无效:应为字符串
- 未捕获的不变冲突:元素类型无效(react、webpack、循环导入)
- React:未捕获的不变量冲突:ReactDOM.render():无效的组件元素
- 如何不断检查页面元素之间的冲突
- Reactjs :使用输入元素时的不变冲突
- 替换字符串,使其不与子元素冲突
- 剑道UI [下拉列表] - 多个元素中的冲突
- 如何让多个元素与jQuerys一起工作 没有.冲突();字符串
- 在 html canvas 元素上使用 javascript 进行冲突检测,而无需使用 jquery
- 不变冲突:当元素在DOM中时,目标容器不是DOM元素
- 两个相同的元素需要执行相同的功能,但存在冲突
- 反应.js - “不变冲突:元素类型无效:预期字符串”简单按钮
- 不变冲突: _registerComponent(..):目标容器不是 DOM 元素
- 使用jquery.on()方法处理同一元素(选项标记)的两个脚本之间的冲突
- 未捕获的错误:不变冲突:元素类型无效:需要字符串(对于内置组件)或类/函数,但得到:对象
- 子元素上的$滑动与滚动冲突,滚动在AngularJS中停止工作
- JS函数名称与元素ID冲突的原因
- react router问题未捕获错误:不变冲突:元素类型无效:应为字符串(用于内置组件)
- 如何使用Javascript防止HTML元素选择选项中的冲突
- 同一元素冲突上的两个单击处理程序