我们知道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; ?????} ?};这样就可以在外部响应点击事件。
JGUI源码：JS菜单动态绑定(8)
原文地址：https://www.cnblogs.com/zhaogaojian/p/10447251.html