Question

“ $。extend（{}，options）”是否可以在JQuery中使用“委托”功能？我有这个问题，因为我使用下面的JQuery javascript在jsp页面中显示一个弹出菜单。

/*
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.backgrounds,
                'cursor': 'default'
            });
        });
    }
    return setIt();

};}(jQuery));

我连接了后端Spring-MVC控制器中由ajax json响应的HTML字符串以在页面上显示弹出菜单后，使用了popmenu.js。由于我重新连接了HTML字符串，因此必须使用委托函数来显示菜单。如果我使用下面的代码而不进行“委托”，那么一切都很好。

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

还有我正在使用的HTML：

<div id="content">
<table  border = "1">
<tr>
<td><input type="checkbox" id="maincheck" name="maincheck"/></td>
<td>目录/文件</td>
<td>名称</td>
<td>大小</td>
<td>最后修改时间</td>
<td>
<div id="ListOrLayout"><span class="fa fa-list-ul"></span> 
<span class="pop_ctrl"><i class="fa fa-caret-down"></i></span>
        <ul>
            <li><div>查看格式</div></li>
            <li><span>列表 
  </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><i 
  class="fa fa-list-ul"></i></span></li>
            <li><a href="javascript:getFileLayout();"><span>网格 
  </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><i 
  class="fa fa-th"></i></span></a></li>

        </ul>
  </div> 
  ...
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.popmenu.js"> 
</script>

我现在在写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>

但这是不起作用的。我不知道popmenu.js委托给祖先的确切事件。因此，任何建议将不胜感激！

Answer 1

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

“ $ .extend（{}，options）”是否可以在JQuery中使用“委托”功能？

1 个答案: