标签:判断 bind cte ext menu query 一个 idt 通知
我们知道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; } };
这样就可以在外部响应点击事件。
标签:判断 bind cte ext menu query 一个 idt 通知
原文地址:https://www.cnblogs.com/zhaogaojian/p/10447251.html