87,997
社区成员
发帖
与我相关
我的任务
分享jquery的popmenu这类的js用delegate或者on应该怎么写 ？
大家好！我在使用Spring MVC3.0做项目的时候需要用到jquery的一种popmenu.js来做弹出式菜单，这个在原来的jsp页面上没有问题，但是当我用ajax把后台来的数据拼接后再$("#content").html(theHtml);返回到前端后，原来的popmenu.js就不起作用了。
我查网上资料后知道可以用js的delegate或者on来做，但是我不知道popmenu.js写成代理的方式是怎么写的。
请大神帮忙看下怎么解决这个问题，谢谢！
popmenu.js:
下面是我写的delegate的js,但是不起作用：
我查网上资料后知道可以用js的delegate或者on来做，但是我不知道popmenu.js写成代理的方式是怎么写的。
请大神帮忙看下怎么解决这个问题，谢谢！
popmenu.js:
<script>
$(function(){
/* $('#demo_box').popmenu(); */
$('#ListOrLayout').popmenu(
{
'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'
}
);
/* $('#demo_box_3').popmenu({'width': '200px', 'background':'#223','focusColor':'#ee5','borderRadius':'10px', 'top': '70', 'left': '-40', 'color':'#1265fe','border':'3px solid #0035fe'}); */
})
</script>
下面是我写的delegate的js,但是不起作用：
<script src="${pageContext.request.contextPath}/js/jquery.min.js">
jQuery("#content").on("#ListOrLayout", popmenu(
{'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'}
));
</script>
...全文
请发表友善的回复…
发表回复
youyiyang 2018-07-08
- 打赏
- 举报
这个问题，我自己解决了，就是在ajax拼接html后再调用yi一个放在</body>后的js,来重新调用jquery.min.js， jquey.popmenu.js和$('#ListOrLayout').popmenu();
代码如下：
ajax,
js:
代码如下：
ajax,
...
$("#content").html("");
$("#content").html(theHtml);
needReloadInAsyncLoad();
...
js:
<script>
function needReloadInAsyncLoad()
{
//ajax异步回发需要重新执行的js函数
//alert("async");
new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src","${pageContext.request.contextPath}/js/jquery.min.js");// 在这里引入了jquery.min.js
document.body.appendChild(new_element);
new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src","${pageContext.request.contextPath}/js/jquery.popmenu.js");// 在这里引入了jquery.popmenu.js
document.body.appendChild(new_element);
$('#ListOrLayout').popmenu(
{
'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'
}
);
}
</script>
youyiyang 2018-07-03
- 打赏
- 举报
知道是错的。但是不知道怎么写
其他哪位大神能帮下忙吗？
其他哪位大神能帮下忙吗？
ambit_tsai-微信 2018-06-28
- 打赏
- 举报
你是
比较完整的代码[/quote]
你是指JS的代码还是全部网页的代码？JS的代码就是我上面一楼贴出来的了：
用popmenu.js能正常显示出来的JS代码如下:
自己修改的代理的JS代码如下：
比较完整的代码[/quote]
你是指JS的代码还是全部网页的代码？JS的代码就是我上面一楼贴出来的了：
用popmenu.js能正常显示出来的JS代码如下:
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.popmenu.js"></script>
<script>
$(function(){
/* $('#demo_box').popmenu(); */
$('#ListOrLayout').popmenu(
{
'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'
}
);
/* $('#demo_box_3').popmenu({'width': '200px', 'background':'#223','focusColor':'#ee5','borderRadius':'10px', 'top': '70', 'left': '-40', 'color':'#1265fe','border':'3px solid #0035fe'}); */
})
</script>
自己修改的代理的JS代码如下：
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script>
$("#content").on("#ListOrLayout", "load",function()
{
popmenu({
'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'})
});
</script>
youyiyang 2018-06-28
- 打赏
- 举报
你是
比较完整的代码[/quote]
你是指JS的代码还是全部网页的代码？JS的代码就是我上面一楼贴出来的了：
用popmenu.js能正常显示出来的JS代码如下:
自己修改的代理的JS代码如下：
比较完整的代码[/quote]
你是指JS的代码还是全部网页的代码？JS的代码就是我上面一楼贴出来的了：
用popmenu.js能正常显示出来的JS代码如下:
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.popmenu.js"></script>
<script>
$(function(){
/* $('#demo_box').popmenu(); */
$('#ListOrLayout').popmenu(
{
'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'
}
);
/* $('#demo_box_3').popmenu({'width': '200px', 'background':'#223','focusColor':'#ee5','borderRadius':'10px', 'top': '70', 'left': '-40', 'color':'#1265fe','border':'3px solid #0035fe'}); */
})
</script>
自己修改的代理的JS代码如下：
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script>
$("#content").on("#ListOrLayout", "load",function()
{
popmenu({
'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'})
});
</script>
youyiyang 2018-06-27
- 打赏
- 举报
开头第一段代码是没有delegate的代码，就是我没有做网格页面，只做列表页面的时候弹出式菜单能用的代码，后来的网格页面就是后台通过json传过来，经过拼接后代替了原来#content里面的html,但是这个时候弹出式菜单就出不来了，如果全部用我现在写的代理的js代码，连列表页面的弹出式菜单也出不来了，就像上面我上传的2张截图那样
ambit_tsai-微信 2018-06-27
- 打赏
- 举报
按你讲的，你开头第一段代码是由ajax获取，并想通过html插入到页面，是这样吗？
youyiyang 2018-06-27
- 打赏
- 举报
我是想仿照一个类似国内的百度网盘，国外drop.box的网站，就是能在web上上传下载文件以及创建文件夹等等文件的操作。
我现在仿照的就是dropbox的这个前端界面：
就像上面dropbox页面上的红框标注的弹出式菜单，能够选择以列表还是网格显示文件夹里面的文件
我仿作的默认的列表显示的table能够有弹出式菜单，因为这个页面载入的时候jquery能起作用，但是网格的时候，后台拼接的html其实和列表页面是差不多的，但是jquery就不起作用了
我现在仿照的就是dropbox的这个前端界面：
就像上面dropbox页面上的红框标注的弹出式菜单，能够选择以列表还是网格显示文件夹里面的文件
我仿作的默认的列表显示的table能够有弹出式菜单，因为这个页面载入的时候jquery能起作用，但是网格的时候，后台拼接的html其实和列表页面是差不多的，但是jquery就不起作用了
ambit_tsai-微信 2018-06-27
- 打赏
- 举报
还有，不了解你的业务，只能告诉你为什么错了
ambit_tsai-微信 2018-06-27
- 打赏
- 举报
前面说了，像第一段代码才是对的。
$('#ListOrLayout').popmenu({
'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'
});
如果要用事件的话，得这样的形式。
jQuery("#content").on(事件, 函数);
像你写的这句，其中"#ListOrLayout"不是一个事件，popmenu(...)不是函数。
jQuery("#content").on("#ListOrLayout", popmenu(...));
youyiyang 2018-06-27
- 打赏
- 举报
那应该怎么写？不能用delegate了吗？
ambit_tsai-微信 2018-06-27
- 打赏
- 举报
本就不是事件，是扩展的一个方法
youyiyang 2018-06-27
- 打赏
- 举报
我看了下popmenu.js的源码，这个popmenu应该不是事件
/*
jQuery Pop Menu
Version: beta
Author: Guc. http://www.gucheen.pro
Based on jQuery 2.0.3
*/
(function ($) {
$.fn.popmenu = function (options) {
var settings = $.extend({
'controller': true,
'width': '300px',
'background': '#34495e',
'focusColor': '#1abc9c',
'borderRadius': '10px',
'top': '50',
'left': '0',
'iconSize': '100px',
'color': '#fff',
'border': '0px'
}, options);
if (settings.controller === true) {
var temp_display = 'none';
} else {
var temp_display = 'block';
}
var tar = $(this);
var tar_body = tar.children('ul');
var tar_list = tar_body.children('li');
var tar_a = tar_list.children('a');
var tar_ctrl = tar.children('.pop_ctrl');
function setIt() {
tar_body.css({
'display': temp_display,
'position': 'absolute',
'margin-top': -settings.top,
'margin-left': -settings.left,
'background': settings.background,
'width': settings.width,
'float': 'left',
'padding': '0',
'border-radius': settings.borderRadius,
'border': settings.border
});
tar_list.css({
'display': 'block',
'color': settings.color,
'float': 'left',
'width': settings.iconSize,
'height': settings.iconSize,
'text-align': 'center',
'border-radius': settings.borderRadius
});
tar_a.css({
'text-decoration': 'none',
'color': settings.color
});
tar_ctrl.hover(function () {
tar_ctrl.css('cursor', 'pointer');
}, function () {
tar_ctrl.css('cursor', 'default')
});
tar_ctrl.click(function (e) {
e.preventDefault();
tar_body.show('fast');
$(document).mouseup(function (e) {
var _con = tar_body;
if (!_con.is(e.target) && _con.has(e.target).length === 0) {
_con.hide();
}
//_con.hide(); some functions you want
});
});
tar_list.hover(function () {
$(this).css({
'background': settings.focusColor,
'cursor': 'pointer'
});
}, function () {
$(this).css({
'background': settings.background,
'cursor': 'default'
});
});
}
return setIt();
};
}(jQuery));
ambit_tsai-微信 2018-06-27
- 打赏
- 举报
按照这样写的话，ajax拼接之前的效果也出不出来了[/quote] 还有这一句的写法错了
jQuery("#content").on("#ListOrLayout", popmenu
$('#ListOrLayout').popmenuambit_tsai-微信 2018-06-27
- 打赏
- 举报
按照这样写的话，ajax拼接之前的效果也出不出来了[/quote] 还有这一句的写法错了
jQuery("#content").on("#ListOrLayout", popmenu
youyiyang 2018-06-27
- 打赏
- 举报
按照这样写的话，ajax拼接之前的效果也出不出来了
ambit_tsai-微信 2018-06-27
- 打赏
- 举报
第二段代码script标签用得有问题
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script>
jQuery("#content").on("#ListOrLayout", popmenu({'background':'#fff',
'color':'#000',
'focusColor':'#21a0df',
'borderRadius':'0',
'top': '0',
'left': '0',
'border':'1px solid #211d1d'}
));
</script>ambit_tsai-微信 2018-06-27
- 打赏
- 举报
比较完整的代码
ambit_tsai-微信 2018-06-27
- 打赏
- 举报
代码方便贴出来吗
