jquery的popmenu这类的js用delegate或者on应该怎么写 ?

youyiyang 阳狮集团 2018-06-27 05:37:45
大家好!我在使用Spring MVC3.0做项目的时候需要用到jquery的一种popmenu.js来做弹出式菜单,这个在原来的jsp页面上没有问题,但是当我用ajax把后台来的数据拼接后再$("#content").html(theHtml);返回到前端后,原来的popmenu.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>
...全文
176 点赞 收藏 18
写回复
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
youyiyang 2018-07-08
这个问题,我自己解决了,就是在ajax拼接html后再调用yi一个放在</body>后的js,来重新调用jquery.min.js, jquey.popmenu.js和$('#ListOrLayout').popmenu();
代码如下:
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
知道是错的。但是不知道怎么写
其他哪位大神能帮下忙吗?
回复
引用 15 楼 youyiyang的回复:
[quote=引用 14 楼 ambit_tsai 的回复:]
[quote=引用 13 楼 ambit_tsai 的回复:]
代码方便贴出来吗
你是
比较完整的代码[/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>
[/quote] 有三个问题,你修改的代码,为什么只引入jquery.js没有popmenu.js? on方法用得不对! popmenu方法用得不对!
回复
youyiyang 2018-06-28
引用 14 楼 ambit_tsai 的回复:
[quote=引用 13 楼 ambit_tsai 的回复:]
代码方便贴出来吗
你是
比较完整的代码[/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张截图那样
回复
按你讲的,你开头第一段代码是由ajax获取,并想通过html插入到页面,是这样吗?
回复
youyiyang 2018-06-27
我是想仿照一个类似国内的百度网盘,国外drop.box的网站,就是能在web上上传下载文件以及创建文件夹等等文件的操作。
我现在仿照的就是dropbox的这个前端界面:


就像上面dropbox页面上的红框标注的弹出式菜单,能够选择以列表还是网格显示文件夹里面的文件
我仿作的默认的列表显示的table能够有弹出式菜单,因为这个页面载入的时候jquery能起作用,但是网格的时候,后台拼接的html其实和列表页面是差不多的,但是jquery就不起作用了



回复
引用 7 楼 youyiyang 的回复:
那应该怎么写?不能用delegate了吗?

还有,不了解你的业务,只能告诉你为什么错了
回复
引用 7 楼 youyiyang 的回复:
那应该怎么写?不能用delegate了吗?

前面说了,像第一段代码才是对的。

$('#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了吗?
回复
引用 5 楼 youyiyang的回复:
我看了下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));

本就不是事件,是扩展的一个方法
回复
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));

回复
引用 3 楼 ambit_tsai的回复:
[quote=引用 2 楼 youyiyang的回复:][quote=引用 1 楼 ambit_tsai 的回复:]
第二段代码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>

按照这样写的话,ajax拼接之前的效果也出不出来了[/quote] 还有这一句的写法错了

jQuery("#content").on("#ListOrLayout", popmenu
[/quote] 像第一段代码那样写才对

$('#ListOrLayout').popmenu
回复
引用 2 楼 youyiyang的回复:
[quote=引用 1 楼 ambit_tsai 的回复:]
第二段代码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>

按照这样写的话,ajax拼接之前的效果也出不出来了[/quote] 还有这一句的写法错了

jQuery("#content").on("#ListOrLayout", popmenu
回复
youyiyang 2018-06-27
引用 1 楼 ambit_tsai 的回复:
第二段代码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>

按照这样写的话,ajax拼接之前的效果也出不出来了
回复
第二段代码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>
回复
引用 13 楼 ambit_tsai 的回复:
代码方便贴出来吗

比较完整的代码
回复
代码方便贴出来吗
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告