jquery插件select2事件不起作用(select2-3.5.4)
2015-10-08 09:11
507 查看
jquery插件select2事件不起作用
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年10月8日 09:01:53 星期四
http://fanshuyao.iteye.com/
一、官网的说明:https://select2.github.io/examples.html(Version 4.0.0)
二、官网的使用例子:
var $eventLog = $(".js-event-log");
var $eventSelect = $(".js-example-events");
$eventSelect.on("select2:open",function(e){ log("select2:open", e);});
$eventSelect.on("select2:close",function(e){ log("select2:close", e);});
$eventSelect.on("select2:select",function(e){ log("select2:select", e);});
$eventSelect.on("select2:unselect",function(e){ log("select2:unselect", e);});
$eventSelect.on("change",function(e){ log("change");});
但是在实际应用中select2:close不起作用。
三、解决方法:
这个原因找了很久都没有找到,昨天终于发现原因了:
原来是select2-close,中间的不是冒号,而是 - (横杠),修改后就能使用了
jquery.validate.js插件也能完善校验。
最终原因是select2的版本问题
在3.5.4版本中的事件为:
The event object contains the following custom properties:
val
The current selection (taking into account the result of the change) - id or array of ids.
added
The added element, if any - the full element object, not just the id.
removed
The removed element, if any - the full element object, not just the id.
The event listener can prevent the opening by calling
The event object contains the following custom properties:
val
The id of the highlighted choice object.
choice
The highlighted choice object.
The event object contains the following custom properties:
val
The id of the highlighted choice object.
choice
The choice object about to be selected.
For the clear button to be visible the
The event object contains the following custom properties:
val
The id of the removing choice object.
choice
The choice object about to be removed.
The event object contains the following custom properties:
val
The id of the highlighted choice object.
choice
The highlighted choice object.
The event object contains the following custom properties:
items
data that was used to populate the results.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年10月8日 09:01:53 星期四
http://fanshuyao.iteye.com/
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年10月8日 09:01:53 星期四
http://fanshuyao.iteye.com/
一、官网的说明:https://select2.github.io/examples.html(Version 4.0.0)
changeis fired whenever an option is selected or removed.
select2:openis fired whenever the dropdown is opened.
select2:openingis fired before this and can be prevented.
select2:closeis fired whenever the dropdown is closed.
select2:closingis fired before this and can be prevented.
select2:selectis fired whenever a result is selected.
select2:selectingis fired before this and can be prevented.
select2:unselectis fired whenever a result is unselected.
select2:unselectingis fired before this and can be prevented.
二、官网的使用例子:
var $eventLog = $(".js-event-log");
var $eventSelect = $(".js-example-events");
$eventSelect.on("select2:open",function(e){ log("select2:open", e);});
$eventSelect.on("select2:close",function(e){ log("select2:close", e);});
$eventSelect.on("select2:select",function(e){ log("select2:select", e);});
$eventSelect.on("select2:unselect",function(e){ log("select2:unselect", e);});
$eventSelect.on("change",function(e){ log("change");});
但是在实际应用中select2:close不起作用。
三、解决方法:
这个原因找了很久都没有找到,昨天终于发现原因了:
$("#xxx").on("select2-close", function (e) { });
原来是select2-close,中间的不是冒号,而是 - (横杠),修改后就能使用了
jquery.validate.js插件也能完善校验。
$("#genders").on("select2-close", function (e) { $(this).valid(); });
最终原因是select2的版本问题
在3.5.4版本中的事件为:
Events
change
Fired when selection is changed.The event object contains the following custom properties:
val
The current selection (taking into account the result of the change) - id or array of ids.
added
The added element, if any - the full element object, not just the id.
removed
The removed element, if any - the full element object, not just the id.
select2-opening
Fired before the dropdown is shown.The event listener can prevent the opening by calling
preventDefault()on the supplied event object.
select2-open
Fired after the dropdown is shown.select2-close
Fired after the dropdown is closed.select2-highlight
Fired when a choice is highlighted in the dropdown.The event object contains the following custom properties:
val
The id of the highlighted choice object.
choice
The highlighted choice object.
select2-selecting
Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection. This event is used to allow the user to reject selection by callingevent.preventDefault()
The event object contains the following custom properties:
val
The id of the highlighted choice object.
choice
The choice object about to be selected.
select2-clearing
Fired when a choice is being cleared in the dropdown, but before any modification has been made to the selection. This event is used to allow the user to reject the clear by callingevent.preventDefault()
For the clear button to be visible the
allowClearoption needs to be
true.
select2-removing
Fired when a choice is about to be removed in the dropdown/input, but before any removal of the choice has been made. This event is used to allow the user to reject removal by callingevent.preventDefault()
The event object contains the following custom properties:
val
The id of the removing choice object.
choice
The choice object about to be removed.
select2-removed
Fired when a choice is removed or cleared.The event object contains the following custom properties:
val
The id of the highlighted choice object.
choice
The highlighted choice object.
select2-loaded
Fired when query function is done loading the data and the results list has been updatedThe event object contains the following custom properties:
items
data that was used to populate the results.
select2-focus
Fired when the control is focussed.select2-blur
Fired when the control is blurred.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年10月8日 09:01:53 星期四
http://fanshuyao.iteye.com/
相关文章推荐
- Jquery知识小点备注
- jQuery
- Web小功能1——jquery实现一个按钮两个功能(触发不同事件)
- jQuery+Ajax+PHP“喜欢”评级功能实现代码
- 分享五个有用的jquery小技巧
- jQuery实现仿微软首页感应鼠标变化滑动窗口效果
- jQuery仅用3行代码实现的显示与隐藏功能完整实例
- Jquery中使用show()与hide()方法动画显示和隐藏图片
- jQuery表格行上移下移和置顶的实现方法
- JQuery小知识
- jQuery eq与取下标的纠葛
- Jquery 获取对象的几种方式
- jquery 使用概览
- 9、第九节课jquery选择器jq2,20151007
- jQuery设计理念
- Code optimization and organization in Javascript / jQuery
- js的链式调用-如何实现类似jquery的链式调用
- jQuery源码分析之closest,has,addBack,addSelf,add方法
- jQuery Mobile基础03----jQuery Mobile Widgets-button
- jQuery Mobile基础02----jQuery Mobile Widgets-page(跳转效果