我们知道 jQuery 绑定事件后的新添加的对象是不响应事件的, 为了解决这个问题, 动态添加的对象需要从新绑定, 使用一个 init 方法实现代码如下
- //Accordion 封装
- (function($) {
- J.Accordion = function($p_selector) {
- init = function(p_options, p_datas, p_param) {
- return $p_selector.each(function() {
- var $accordion = $(this);
- var datas = $accordion.extend(
- {
- _sumdelta: 0,
- _mouseintervalhandle: undefined,
- _startmousewheeldatetime: null
- },
- p_datas
- );
- var events = {
- onNavItemClick: undefined
- };
- $accordion.data("datas", datas);
- $accordion.data("events", events);
- //Accordion 目录点击绑定
- $accordion.find("dt.jgui-accordion-navitem").unbind("click"); // 先解绑
- $accordion.find("dt.jgui-accordion-navitem").click(function(event) {
- var $accordionnavitem = $(this);
- if ($accordion.data("events").onNavItemClick != undefined) {
- var ret = $accordion.data("events").onNavItemClick(this);
- if (ret == false) return;
- }
- $accordionnavitem.removeClass("selected");
- $accordionnavitem.siblings("dd").slideToggle(300, function() {
- if ($(this).is(":hidden")) {
- $(this)
- .siblings("dt")
- .children()
- .children(".jgui-accordion-navitem-more")
- .removeClass("expanded", 0);
- } else {
- $(this)
- .siblings("dt")
- .children()
- .children(".jgui-accordion-navitem-more")
- .addClass("expanded", 0);
- }
- });
- $accordionnavitem
- .closest(".jgui-accordion")
- .find(".jgui-accordion-navitem")
- .removeClass("selected");
- $accordionnavitem
- .closest(".jgui-accordion")
- .find(".jgui-accordion-navitem-child")
- .removeClass("selected");
- $accordionnavitem.addClass("selected");
- stopPropagation(event);
- });
- //Accordion 内容条目点击绑定
- $accordion.find(".jgui-accordion-navitem-child").unbind("click");
- $accordion.find(".jgui-accordion-navitem-child").click(function(event) {
- var $accordionnavitemchild = $(this);
- $accordionnavitemchild
- .closest(".jgui-accordion")
- .find(".jgui-accordion-navitem")
- .removeClass("selected");
- $accordionnavitemchild
- .closest(".jgui-accordion")
- .find(".jgui-accordion-navitem-child")
- .removeClass("selected");
- $accordionnavitemchild.addClass("selected");
- stopPropagation(event);
- });
- // 手机端鼠标拖动事件, 手机端可以屏蔽下面改成用 CSS3 隐藏滚动条, 毕竟手机端不用考虑兼容性
- $accordion.unbind("touchstart");
- $accordion.on("touchstart", function(e) {
- startY = e.originalEvent.changedTouches[0].pageY;
- });
- $accordion.unbind("touchmove");
- $accordion.on("touchmove", function(e) {
- e.preventDefault();
- (moveEndY = e.originalEvent.changedTouches[0].pageY),
- (Y = moveEndY - startY);
- startY = moveEndY;
- var cur_top = $accordion.scrollTop(); // 当前滚过的高度
- $accordion.stop().animate({ scrollTop: -Y + cur_top }, 0);
- });
- });
- };
- // 折叠成工具条样式
- fold = function() {
- return $p_selector.each(function() {
- var $accordion = $(this);
- $accordion
- .find(".jgui-accordion-navitem")
- .siblings("dd")
- .slideUp();
- $accordion.find(".jgui-accordion-navitem span").hide();
- $accordion
- .find(".jgui-accordion-navitem .jgui-accordion-navitem-more")
- .hide();
- });
- };
- // 展开成面板样式
- unfold = function() {
- return $p_selector.each(function() {
- var $accordion = $(this);
- $accordion
- .find(".jgui-accordion-navitem-more.expanded")
- .closest(".jgui-accordion-navitem")
- .siblings("dd")
- .slideDown();
- $accordion.find(".jgui-accordion-navitem span").show();
- $accordion
- .find(".jgui-accordion-navitem .jgui-accordion-navitem-more")
- .show();
- });
- };
- return {
- init: init,
- fold: fold,
- unfold: unfold
- };
- };
- })(J.$);
当使用 Ajax 向 according 里添加 html 数据后, 可以调用一次 init 即可实现从新绑定 (先 unbind, 再 bind).
示例: J.Accordion($(".jgui-accordion")).init();
如果后期优化, 可以判断哪些绑定过的不再绑定. 另外为了通知外部页面点击了 NavItem 操作, 做了一个回调函数
- //NavItem 点击事件
- var events = $('#menuaccordion').data("events");
- events.onNavItemClick=function (obj)
- {
- if (!$("#leftpanel").is(".unfold")) {// 折叠状态展开
- $("#leftpanel").width(300);
- $("#centerpanel").CSS("left", "300px");
- $("#mainlogo").HTML("JGUI DEMO");
- J.Accordion($(obj).closest(".jgui-accordion")).unfold();
- $("#leftpanel").toggleClass("unfold");
- $("#folderbtn").toggleClass("icon-menu-unfold icon-menu-fold");
- return false;
- }
- };
这样就可以在外部响应点击事件.
来源: http://www.bubuko.com/infodetail-2970231.html