主页
问答

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>

...全文

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

知道是错的。但是不知道怎么写
其他哪位大神能帮下忙吗？

回复赞

ambit_tsai-微信 2018-06-28

引用 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张截图那样

回复赞

ambit_tsai-微信 2018-06-27

按你讲的，你开头第一段代码是由ajax获取，并想通过html插入到页面，是这样吗？

回复赞

youyiyang 2018-06-27

我是想仿照一个类似国内的百度网盘，国外drop.box的网站，就是能在web上上传下载文件以及创建文件夹等等文件的操作。
我现在仿照的就是dropbox的这个前端界面：

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

回复赞

ambit_tsai-微信 2018-06-27

引用 7 楼 youyiyang 的回复:

那应该怎么写？不能用delegate了吗？

还有，不了解你的业务，只能告诉你为什么错了

回复赞

ambit_tsai-微信 2018-06-27

引用 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了吗？

回复赞

ambit_tsai-微信 2018-06-27

引用 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));

回复赞

ambit_tsai-微信 2018-06-27

引用 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

回复赞

ambit_tsai-微信 2018-06-27

引用 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拼接之前的效果也出不出来了

回复赞

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

引用 13 楼 ambit_tsai 的回复:

代码方便贴出来吗

比较完整的代码

回复赞

ambit_tsai-微信 2018-06-27

代码方便贴出来吗

回复赞

发动态

发帖子

JavaScript

创建于2007-09-28

加入

8.4w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript

申请成为版主

社区公告

暂无公告

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

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